<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block
	th:include="include :: header('Analytics Dashboard - Application Intel - SmartAdmin v4.5.1')" />
<link rel="stylesheet" media="screen, print"
	th:href="@{/css/miscellaneous/reactions/reactions.css}">
<link rel="stylesheet" media="screen, print"
	th:href="@{/css/miscellaneous/fullcalendar/fullcalendar.bundle.css}">
<link rel="stylesheet" media="screen, print"
	th:href="@{/css/miscellaneous/jqvmap/jqvmap.bundle.css}">
</head>
<style>
	.change{
		font-size:1rem;
	}
	.change.down{
		color:#fd3995;
	}
	.change.up{
		color:#00ff00;
	}
</style>
<body class="mod-bg-1 mod-nav-link nav-function-minify">
	<!-- DOC: script to save and load page settings -->
	<script>
		/**
		 *	This script should be placed right after the body tag for fast execution 
		 *	Note: the script is written in pure javascript and does not depend on thirdparty library
		 **/
		'use strict';

		var classHolder = document.getElementsByTagName("BODY")[0],
		/** 
		 * Load from localstorage
		 **/
		themeSettings = (localStorage.getItem('themeSettings')) ? JSON
				.parse(localStorage.getItem('themeSettings')) : {}, themeURL = themeSettings.themeURL
				|| '', themeOptions = themeSettings.themeOptions || '';
		/** 
		 * Load theme options
		 **/
		if (themeSettings.themeOptions) {
			classHolder.className = themeSettings.themeOptions;
			console.log("%c✔ Theme settings loaded", "color: #148f32");
		} else {
			console
					.log(
							"%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...",
							"color: #ed1c24");
		}
		if (themeSettings.themeURL && !document.getElementById('mytheme')) {
			var cssfile = document.createElement('link');
			cssfile.id = 'mytheme';
			cssfile.rel = 'stylesheet';
			cssfile.href = themeURL;
			document.getElementsByTagName('head')[0].appendChild(cssfile);

		} else if (themeSettings.themeURL && document.getElementById('mytheme')) {
			document.getElementById('mytheme').href = themeSettings.themeURL;
		}
		/** 
		 * Save to localstorage 
		 **/
		var saveSettings = function() {
			themeSettings.themeOptions = String(classHolder.className).split(
					/[^\w-]+/).filter(function(item) {
				return /^(nav|header|footer|mod|display)-/i.test(item);
			}).join(' ');
			if (document.getElementById('mytheme')) {
				themeSettings.themeURL =  document.getElementById('mytheme')
						.getAttribute("href");
			}
			;
			localStorage
					.setItem('themeSettings', JSON.stringify(themeSettings));
		}
		/** 
		 * Reset settings
		 **/
		var resetSettings = function() {
			localStorage.setItem("themeSettings", "");
		}
	</script>
	<!-- BEGIN Page Wrapper -->
	<div class="page-wrapper">
		<div class="page-inner">
			<!-- BEGIN Left Aside -->
			<aside class="page-sidebar">
				<div class="page-logo">
					<a href="#"
						class="page-logo-link press-scale-down d-flex align-items-center position-relative"
						data-toggle="modal" data-target="#modal-shortcut"> <img
						src="img/logo.png" alt="SmartAdmin WebApp"
						aria-roledescription="logo"> <span
						class="page-logo-text mr-1">上海赫丰HR智慧系统</span> <span
						class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
						<i
						class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>
					</a>
				</div>
				<!-- BEGIN PRIMARY NAVIGATION -->
				<nav id="js-primary-nav" class="primary-nav" role="navigation">
					<div class="nav-filter">
						<div class="position-relative">
							<input type="text" id="nav_filter_input"
								placeholder="Filter menu" class="form-control" tabindex="0">
							<a href="#" onclick="return false;"
								class="btn-primary btn-search-close js-waves-off"
								data-action="toggle" data-class="list-filter-active"
								data-target=".page-sidebar"> <i class="fal fa-chevron-up"></i>
							</a>
						</div>
					</div>
					<div class="info-card" th:object="${user}">
						<img src="img/demo/avatars/avatar-admin.png"
							class="profile-image rounded-circle" alt="Dr. Codex Lantern">
						<div class="info-card-text">
							<a href="#" class="d-flex align-items-center text-white"> <span
								class="text-truncate text-truncate-sm d-inline-block" th:text="${user.userName}">
									</span>
							</a> <span class="d-inline-block text-truncate text-truncate-sm" th:text="${user.email}">
								</span>
						</div>
						<img src="img/card-backgrounds/cover-2-lg.png" class="cover"
							alt="cover"> <a href="#" onclick="return false;"
							class="pull-trigger-btn" data-action="toggle"
							data-class="list-filter-active" data-target=".page-sidebar"
							data-focus="nav_filter_input"> <i class="fal fa-angle-down"></i>
						</a>
					</div>
					<ul id="js-nav-menu" class="nav-menu">
						<li class="active open"><a href="#" title="首页"
							data-filter-tags="application intel"> <i
								class="fal fa-chart-pie"></i> <span class="nav-link-text"
								data-i18n="nav.application_intelss">首页</span>
						</a>
							<ul>
								<li class="active">
									<a th:href="@{/index}" title="仪表板">
										<span class="nav-link-text">仪表板</span>
									</a>
								</li>
								<li>
									<a th:href="@{/system/remind}" title="消息提醒">
										<span class="nav-link-text">消息提醒</span>
									</a>
								</li>
								<li>
									<a th:href="@{/system/setting}" title="个人设置">
										<span class="nav-link-text">个人设置</span>
									</a>
								</li>
							</ul></li>
						<li><a href="#" title="系统监控"
							data-filter-tags="monitor settings"> <i class="fal fa-desktop"></i>
								<span class="nav-link-text" data-i18n="nav.monitor_settings">系统监控</span>
						</a>
							<ul>
								<li><a th:href="@{/monitor/job}" title="定时任务管理"
									data-filter-tags="monitor settings job"> <span   
										class="nav-link-text">定时任务管理</span>
								</a></li>	<!--  data-i18n="nav.monitor_settings_job" -->
							</ul></li>	
						<li><a href="#" title="系统设置"
							data-filter-tags="theme settings"> <i class="fal fa-cog"></i>
								<span class="nav-link-text" >系统设置</span> <!--data-i18n="nav.theme_settings"   -->
						</a>
							<ul>
								<li><a th:href="@{/system/user}" title="用户管理"
									data-filter-tags="system settings user"> <span
										class="nav-link-text" >用户管理</span>
										<!-- data-i18n="nav.system_settings_user"  -->
								</a></li>
								<li><a th:href="@{/system/role}" title="角色管理"
									data-filter-tags="system settings role"> <span
										class="nav-link-text" data-i18n="nav.system_settings_role">角色管理</span>
								</a></li>
							</ul></li>
						<li><a href="#" title="公司设置"
							data-filter-tags="system settings"> <i class="fal fa-edit"></i>
								<span class="nav-link-text" data-i18n="nav.system_settings">公司设置</span>
						</a>
							<ul>
								<li><a th:href="@{/system/dept}" title="组织架构"
									data-filter-tags="system settings dept"> <span
										class="nav-link-text" data-i18n="system settings dept">组织架构</span>
								</a></li>

								<li><a th:href="@{/system/emp1}" title="员工花名册"
									data-filter-tags="system settings emp"> <span
										class="nav-link-text" data-i18n="system settings emp">员工花名册</span>
								</a></li>
							</ul></li>


						<li><a href="#" title="资料管理" data-filter-tags="ui components">
								<i class="fal fa-book"></i> <span class="nav-link-text"
								data-i18n="nav.ui_componentss">资料管理</span>
						</a>
							<ul>
								<li><a th:href="@{/system/comfile}" title="公司文件"
									data-filter-tags="system settings emp"> <span
										class="nav-link-text" data-i18n="system settings emp">公司文件</span>
								</a></li>
								<li><a th:href="@{/system/goods}" title="办公用品"
									data-filter-tags="system settings emp"> <span
										class="nav-link-text" data-i18n="system settings emp">办公用品</span>
								</a></li>
								<li><a th:href="@{/system/papers}" title="公司证件"
									data-filter-tags="system settings emp"> <span
										class="nav-link-text" data-i18n="system settings emp">公司证件</span>
								</a></li>
								<li><a th:href="@{/system/contractmana}" title="合约管理"
									data-filter-tags="system settings emp"> <span
										class="nav-link-text" data-i18n="system settings emp">合约管理</span>
								</a></li>
								

							</ul></li>
						<li><a href="#" title="工资设置"
							data-filter-tags="statistics chart graphs"> <i
								class="fal fa-cube"></i> <span class="nav-link-text"
								data-i18n="nav.statisticss">工资设置</span>
						</a>
							<ul>
								<li><a th:href="@{/system/accumulation}" title="社保公积金计算规则"
									data-filter-tags="statistics chart graphs sparkline small tiny">
										<span class="nav-link-text"
										data-i18n="nav.statistics_sparklines">社保公积金计算规则</span> <span
										class="dl-ref label bg-primary-700 ml-2"></span>
								</a></li>
								<li><a th:href="@{/system/checkrule}"
									title="考勤规则"
									data-filter-tags="statistics chart graphs easy pie chart">
										<span class="nav-link-text"
										data-i18n="nav.statistics_easy_pie_charts">考勤规则
											</span> <span class="dl-ref label bg-primary-700 ml-2"></span>
								</a></li>
								<li><a th:href="@{/system/salaryrule}" title="工资增减规则"
									data-filter-tags="statistics chart graphs dygraph complex">
										<span class="nav-link-text" data-i18n="nav.statistics_dygraphs">工资增减规则</span>
										<span class="dl-ref label bg-primary-700 ml-2"></span>
								</a></li>
							</ul></li>
						<li><a href="#" title="员工考勤"
							data-filter-tags="statistics chart graphs"> <i
								class="fal fa-calendar-alt"></i> <span class="nav-link-text"
								data-i18n="nav.statisticss">员工考勤</span>
						</a>
							<ul>
								<li>
									<a th:href="@{/system/review}" title="年假查阅">
										<span class="nav-link-text">年假查阅</span>
									</a>
								</li>
								<li>
									<a th:href="@{/system/attendance}" title="考勤查阅">
										<span class="nav-link-text">考勤查阅</span>
									</a>
								</li>					
							</ul></li>
						<li>
                                <a href="#" title="工资核算" data-filter-tags="wage settings">
                                    <i class="fal fa-sack-dollar"></i>
                                    <span class="nav-link-text" data-i18n="nav.wage_settings">工资核算</span>
                                </a>
                                <ul>
                                	<li>
                                        <a th:href="@{/system/penalty}" title="处罚记录" data-filter-tags="wage settings punishRecord">
                                            <span class="nav-link-text" data-i18n="nav.wage_settings_punishRecord">处罚记录</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{/system/performance}" title="绩效管理" data-filter-tags="wage settings performManage">
                                            <span class="nav-link-text" data-i18n="nav.wage_settings_performManage">绩效管理</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{/wage/providerecord}" title="发放记录" data-filter-tags="wage settings providerecord">
                                            <span class="nav-link-text" data-i18n="nav.wage_settings_providerecord">发放记录</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{/wage/newwageaccount}" title="核算新工资" data-filter-tags="wage settings newWageAccount">
                                            <span class="nav-link-text" data-i18n="nav.wage_settings_newWageAccount">核算新工资</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
					</ul>
					<div class="filter-message js-filter-message bg-success-600"></div>
				</nav>
				<!-- END PRIMARY NAVIGATION -->
				<!-- NAV FOOTER -->
				<div class="nav-footer shadow-top">
					<a href="#" onclick="return false;" data-action="toggle"
						data-class="nav-function-minify" class="hidden-md-down"> <i
						class="ni ni-chevron-right"></i> <i class="ni ni-chevron-right"></i>
					</a>
					<ul class="list-table m-auto nav-footer-buttons">
						<li><a href="javascript:void(0);" data-toggle="tooltip"
							data-placement="top" title="Chat logs"> <i
								class="fal fa-comments"></i>
						</a></li>
						<li><a href="javascript:void(0);" data-toggle="tooltip"
							data-placement="top" title="Support Chat"> <i
								class="fal fa-life-ring"></i>
						</a></li>
						<li><a href="javascript:void(0);" data-toggle="tooltip"
							data-placement="top" title="Make a call"> <i
								class="fal fa-phone"></i>
						</a></li>
					</ul>
				</div>
				<!-- END NAV FOOTER -->
			</aside>
			<!-- END Left Aside -->
			<div class="page-content-wrapper">
				<!-- BEGIN Page Header -->
				<header class="page-header" role="banner">
					<!-- we need this logo when user switches to nav-function-top -->
					<div class="page-logo">
						<a href="#"
							class="page-logo-link press-scale-down d-flex align-items-center position-relative"
							data-toggle="modal" data-target="#modal-shortcut"> <img
							src="img/logo.png" alt="SmartAdmin WebApp"
							aria-roledescription="logo"> <span
							class="page-logo-text mr-1">SmartAdmin WebApp</span> <span
							class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
							<i
							class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>
						</a>
					</div>
					<!-- DOC: nav menu layout change shortcut -->
					<div class="hidden-md-down dropdown-icon-menu position-relative">
						<a href="#" class="header-btn btn js-waves-off"
							data-action="toggle" data-class="nav-function-hidden"
							title="Hide Navigation"> <i class="ni ni-menu"></i>
						</a>
						<ul>
							<li><a href="#" class="btn js-waves-off"
								data-action="toggle" data-class="nav-function-minify"
								title="Minify Navigation"> <i class="ni ni-minify-nav"></i>
							</a></li>
							<li><a href="#" class="btn js-waves-off"
								data-action="toggle" data-class="nav-function-fixed"
								title="Lock Navigation"> <i class="ni ni-lock-nav"></i>
							</a></li>
						</ul>
					</div>
					<!-- DOC: mobile button appears during mobile width -->
					<div class="hidden-lg-up">
						<a href="#" class="header-btn btn press-scale-down"
							data-action="toggle" data-class="mobile-nav-on"> <i
							class="ni ni-menu"></i>
						</a>
					</div>
					<div class="search">
						<form class="app-forms hidden-xs-down" role="search"
							action="page_search.html" autocomplete="off">
							<input type="text" id="search-field"
								placeholder="Search for anything" class="form-control"
								tabindex="1"> <a href="#" onclick="return false;"
								class="btn-danger btn-search-close js-waves-off d-none"
								data-action="toggle" data-class="mobile-search-on"> <i
								class="fal fa-times"></i>
							</a>
						</form>
					</div>
					<div class="ml-auto d-flex">
						<!-- activate app search icon (mobile) -->
						<div class="hidden-sm-up">
							<a href="#" class="header-icon" data-action="toggle"
								data-class="mobile-search-on" data-focus="search-field"
								title="Search"> <i class="fal fa-search"></i>
							</a>
						</div>
						<!-- app settings -->
						<div class="hidden-md-down">
							<a href="#" class="header-icon" data-toggle="modal"
								data-target=".js-modal-settings"> <i class="fal fa-cog"></i>
							</a>
						</div>
						<!-- app shortcuts -->
						<div>
							<a href="#" class="header-icon" data-toggle="dropdown"
								title="My Apps"> <i class="fal fa-cube"></i>
							</a>
							<div class="dropdown-menu dropdown-menu-animated w-auto h-auto">
								<div
									class="dropdown-header bg-trans-gradient d-flex justify-content-center align-items-center rounded-top">
									<h4 class="m-0 text-center color-white">
										Quick Shortcut <small class="mb-0 opacity-80">User
											Applications & Addons</small>
									</h4>
								</div>
								<div class="custom-scroll h-100">
									<ul class="app-list">
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-2 icon-stack-3x color-primary-600"></i> <i
													class="base-3 icon-stack-2x color-primary-700"></i> <i
													class="ni ni-settings icon-stack-1x text-white fs-lg"></i>
											</span> <span class="app-list-name"> Services </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-2 icon-stack-3x color-primary-400"></i> <i
													class="base-10 text-white icon-stack-1x"></i> <i
													class="ni md-profile color-primary-800 icon-stack-2x"></i>
											</span> <span class="app-list-name"> Account </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-9 icon-stack-3x color-success-400"></i> <i
													class="base-2 icon-stack-2x color-success-500"></i> <i
													class="ni ni-shield icon-stack-1x text-white"></i>
											</span> <span class="app-list-name"> Security </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-18 icon-stack-3x color-info-700"></i> <span
													class="position-absolute pos-top pos-left pos-right color-white fs-md mt-2 fw-400">28</span>
											</span> <span class="app-list-name"> Calendar </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-7 icon-stack-3x color-info-500"></i> <i
													class="base-7 icon-stack-2x color-info-700"></i> <i
													class="ni ni-graph icon-stack-1x text-white"></i>
											</span> <span class="app-list-name"> Stats </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-4 icon-stack-3x color-danger-500"></i> <i
													class="base-4 icon-stack-1x color-danger-400"></i> <i
													class="ni ni-envelope icon-stack-1x text-white"></i>
											</span> <span class="app-list-name"> Messages </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-4 icon-stack-3x color-fusion-400"></i> <i
													class="base-5 icon-stack-2x color-fusion-200"></i> <i
													class="base-5 icon-stack-1x color-fusion-100"></i> <i
													class="fal fa-keyboard icon-stack-1x color-info-50"></i>
											</span> <span class="app-list-name"> Notes </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-16 icon-stack-3x color-fusion-500"></i> <i
													class="base-10 icon-stack-1x color-primary-50 opacity-30"></i>
													<i
													class="base-10 icon-stack-1x fs-xl color-primary-50 opacity-20"></i>
													<i
													class="fal fa-dot-circle icon-stack-1x text-white opacity-85"></i>
											</span> <span class="app-list-name"> Photos </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-19 icon-stack-3x color-primary-400"></i> <i
													class="base-7 icon-stack-2x color-primary-300"></i> <i
													class="base-7 icon-stack-1x fs-xxl color-primary-200"></i>
													<i class="base-7 icon-stack-1x color-primary-500"></i> <i
													class="fal fa-globe icon-stack-1x text-white opacity-85"></i>
											</span> <span class="app-list-name"> Maps </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-5 icon-stack-3x color-success-700 opacity-80"></i>
													<i
													class="base-12 icon-stack-2x color-success-700 opacity-30"></i>
													<i class="fal fa-comment-alt icon-stack-1x text-white"></i>
											</span> <span class="app-list-name"> Chat </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-5 icon-stack-3x color-warning-600"></i> <i
													class="base-7 icon-stack-2x color-warning-800 opacity-50"></i>
													<i class="fal fa-phone icon-stack-1x text-white"></i>
											</span> <span class="app-list-name"> Phone </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-6 icon-stack-3x color-danger-600"></i> <i
													class="fal fa-chart-line icon-stack-1x text-white"></i>
											</span> <span class="app-list-name"> Projects </span>
										</a></li>
										<li class="w-100"><a href="#"
											class="btn btn-default mt-4 mb-2 pr-5 pl-5"> Add more
												apps </a></li>
									</ul>
								</div>
							</div>
						</div>
						<!-- app message -->
						<a href="#" class="header-icon" data-toggle="modal"
							data-target=".js-modal-messenger"> <i class="fal fa-globe"></i>
							<span class="badge badge-icon">!</span>
						</a>
						<!-- app notification -->
						<div>
							<a href="#" class="header-icon" data-toggle="dropdown"
								> <i class="fal fa-bell"></i>
								<span class="badge badge-icon" id="remindTotal_1"></span>
							</a>
							<div class="dropdown-menu dropdown-menu-animated dropdown-xl">
								<div
									class="dropdown-header bg-trans-gradient d-flex justify-content-center align-items-center rounded-top mb-2">
									<h4 class="m-0 text-center color-white">
										<span id="remindTotal_2"></span> 条未查看 <small class="mb-0 opacity-80">系统
											提醒</small>
									</h4>
								</div>
								<ul class="nav nav-tabs nav-tabs-clean" role="tablist">
									<li class="nav-item"><a
										class="nav-link px-4 fs-md js-waves-on fw-500"
										data-toggle="tab" href="#tab-messages"
										data-i18n="drpdwn.messages">Messages</a></li>
									<li class="nav-item"><a
										class="nav-link px-4 fs-md js-waves-on fw-500"
										data-toggle="tab" href="#tab-feeds" data-i18n="drpdwn.feeds">Feeds</a>
									</li>
									<li class="nav-item"><a
										class="nav-link px-4 fs-md js-waves-on fw-500"
										data-toggle="tab" href="#tab-events" data-i18n="drpdwn.events">Events</a>
									</li>
								</ul>
								<div class="tab-content tab-notification">
									<div class="tab-pane active p-3 text-center">
										<h5 class="mt-4 pt-4 fw-500">
											<span class="d-block fa-3x pb-4 text-muted"> <i
												class="ni ni-arrow-up text-gradient opacity-70"></i>
											</span> Select a tab above to activate <small
												class="mt-3 fs-b fw-400 text-muted"> This blank page
												message helps protect your privacy, or you can show the
												first message here automatically through <a href="#">settings
													page</a>
											</small>
										</h5>
									</div>
									<div class="tab-pane" id="tab-messages" role="tabpanel">
										<div class="custom-scroll h-100">
											<ul class="notification" id="remindList">
												<!-- <li class="unread">
													<a href="#" class="d-flex align-items-center">  
														<span class="d-flex flex-column flex-1 ml-1"> 
															<span class="name">Melissa Ayre </span>
															<span class="msg-a fs-sm">Re: New security codes</span>
															<span class="fs-nano text-muted mt-1">56 seconds ago</span>
														</span>
													</a>
												</li> -->
											</ul>
										</div>
									</div>
									<div class="tab-pane" id="tab-feeds" role="tabpanel">
										<div class="custom-scroll h-100">
											<ul class="notification">
												<li class="unread">
													<div class="d-flex align-items-center show-child-on-hover">
														<span class="d-flex flex-column flex-1"> <span
															class="name d-flex align-items-center">Administrator
																<span class="badge badge-success fw-n ml-1">UPDATE</span>
														</span> <span class="msg-a fs-sm"> System updated to
																version <strong>4.5.1</strong> <a
																href="docs_buildnotes.html">(patch notes)</a>
														</span> <span class="fs-nano text-muted mt-1">5 mins ago</span>
														</span>
														<div
															class="show-on-hover-parent position-absolute pos-right pos-bottom p-3">
															<a href="#" class="text-muted" title="delete"><i
																class="fal fa-trash-alt"></i></a>
														</div>
													</div>
												</li>
												<li>
													<div class="d-flex align-items-center show-child-on-hover">
														<div class="d-flex flex-column flex-1">
															<span class="name"> Adison Lee <span
																class="fw-300 d-inline">replied to your video <a
																	href="#" class="fw-400"> Cancer Drug</a>
															</span>
															</span> <span class="msg-a fs-sm mt-2">Bring to the table
																win-win survival strategies to ensure proactive
																domination. At the end of the day...</span> <span
																class="fs-nano text-muted mt-1">10 minutes ago</span>
														</div>
														<div
															class="show-on-hover-parent position-absolute pos-right pos-bottom p-3">
															<a href="#" class="text-muted" title="delete"><i
																class="fal fa-trash-alt"></i></a>
														</div>
													</div>
												</li>
												<li>
													<div class="d-flex align-items-center show-child-on-hover">
														<!--<img src="img/demo/avatars/avatar-m.png" data-src="img/demo/avatars/avatar-k.png" class="profile-image rounded-circle" alt="k" />-->
														<div class="d-flex flex-column flex-1">
															<span class="name"> Troy Norman'<span
																class="fw-300">s new connections</span>
															</span>
															<div class="fs-sm d-flex align-items-center mt-2">
																<span
																	class="profile-image-md mr-1 rounded-circle d-inline-block"
																	style="background-image: url('img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
																<span
																	class="profile-image-md mr-1 rounded-circle d-inline-block"
																	style="background-image: url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
																<span
																	class="profile-image-md mr-1 rounded-circle d-inline-block"
																	style="background-image: url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
																<span
																	class="profile-image-md mr-1 rounded-circle d-inline-block"
																	style="background-image: url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
																<div data-hasmore="+3"
																	class="rounded-circle profile-image-md mr-1">
																	<span
																		class="profile-image-md mr-1 rounded-circle d-inline-block"
																		style="background-image: url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
																</div>
															</div>
															<span class="fs-nano text-muted mt-1">55 minutes
																ago</span>
														</div>
														<div
															class="show-on-hover-parent position-absolute pos-right pos-bottom p-3">
															<a href="#" class="text-muted" title="delete"><i
																class="fal fa-trash-alt"></i></a>
														</div>
													</div>
												</li>
												<li>
													<div class="d-flex align-items-center show-child-on-hover">
														<!--<img src="img/demo/avatars/avatar-m.png" data-src="img/demo/avatars/avatar-e.png" class="profile-image-sm rounded-circle align-self-start mt-1" alt="k" />-->
														<div class="d-flex flex-column flex-1">
															<span class="name">Dr John Cook <span
																class="fw-300">sent a <span class="text-danger">new
																		signal</span></span></span> <span class="msg-a fs-sm mt-2">Nanotechnology
																immersion along the information highway will close the
																loop on focusing solely on the bottom line.</span> <span
																class="fs-nano text-muted mt-1">10 minutes ago</span>
														</div>
														<div
															class="show-on-hover-parent position-absolute pos-right pos-bottom p-3">
															<a href="#" class="text-muted" title="delete"><i
																class="fal fa-trash-alt"></i></a>
														</div>
													</div>
												</li>
												<li>
													<div class="d-flex align-items-center show-child-on-hover">
														<div class="d-flex flex-column flex-1">
															<span class="name">Lab Images <span class="fw-300">were
																	updated!</span></span>
															<div class="fs-sm d-flex align-items-center mt-1">
																<a href="#" class="mr-1 mt-1" title="Cell A-0012"> <span
																	class="d-block img-share"
																	style="background-image: url('img/thumbs/pic-7.png'); background-size: cover;"></span>
																</a> <a href="#" class="mr-1 mt-1"
																	title="Patient A-473 saliva"> <span
																	class="d-block img-share"
																	style="background-image: url('img/thumbs/pic-8.png'); background-size: cover;"></span>
																</a> <a href="#" class="mr-1 mt-1"
																	title="Patient A-473 blood cells"> <span
																	class="d-block img-share"
																	style="background-image: url('img/thumbs/pic-11.png'); background-size: cover;"></span>
																</a> <a href="#" class="mr-1 mt-1"
																	title="Patient A-473 Membrane O.C"> <span
																	class="d-block img-share"
																	style="background-image: url('img/thumbs/pic-12.png'); background-size: cover;"></span>
																</a>
															</div>
															<span class="fs-nano text-muted mt-1">55 minutes
																ago</span>
														</div>
														<div
															class="show-on-hover-parent position-absolute pos-right pos-bottom p-3">
															<a href="#" class="text-muted" title="delete"><i
																class="fal fa-trash-alt"></i></a>
														</div>
													</div>
												</li>
												<li>
													<div class="d-flex align-items-center show-child-on-hover">
														<!--<img src="img/demo/avatars/avatar-m.png" data-src="img/demo/avatars/avatar-h.png" class="profile-image rounded-circle align-self-start mt-1" alt="k" />-->
														<div class="d-flex flex-column flex-1">
															<div class="name mb-2">
																Lisa Lamar<span class="fw-300"> updated project</span>
															</div>
															<div class="row fs-b fw-300">
																<div class="col text-left">Progress</div>
																<div class="col text-right fw-500">45%</div>
															</div>
															<div class="progress progress-sm d-flex mt-1">
																<span
																	class="progress-bar bg-primary-500 progress-bar-striped"
																	role="progressbar" style="width: 45%"
																	aria-valuenow="45" aria-valuemin="0"
																	aria-valuemax="100"></span>
															</div>
															<span class="fs-nano text-muted mt-1">2 hrs ago</span>
															<div
																class="show-on-hover-parent position-absolute pos-right pos-bottom p-3">
																<a href="#" class="text-muted" title="delete"><i
																	class="fal fa-trash-alt"></i></a>
															</div>
														</div>
													</div>
												</li>
											</ul>
										</div>
									</div>
									<div class="tab-pane" id="tab-events" role="tabpanel">
										<div class="d-flex flex-column h-100">
											<div class="h-auto">
												<table
													class="table table-bordered table-calendar m-0 w-100 h-100 border-0">
													<tr>
														<th colspan="7" class="pt-3 pb-2 pl-3 pr-3 text-center">
															<div class="js-get-date h5 mb-2">[your date here]</div>
														</th>
													</tr>
													<tr class="text-center">
														<th>Sun</th>
														<th>Mon</th>
														<th>Tue</th>
														<th>Wed</th>
														<th>Thu</th>
														<th>Fri</th>
														<th>Sat</th>
													</tr>
													<tr>
														<td class="text-muted bg-faded">30</td>
														<td>1</td>
														<td>2</td>
														<td>3</td>
														<td>4</td>
														<td>5</td>
														<td><i
															class="fal fa-birthday-cake mt-1 ml-1 position-absolute pos-left pos-top text-primary"></i>
															6</td>
													</tr>
													<tr>
														<td>7</td>
														<td>8</td>
														<td>9</td>
														<td class="bg-primary-300 pattern-0">10</td>
														<td>11</td>
														<td>12</td>
														<td>13</td>
													</tr>
													<tr>
														<td>14</td>
														<td>15</td>
														<td>16</td>
														<td>17</td>
														<td>18</td>
														<td>19</td>
														<td>20</td>
													</tr>
													<tr>
														<td>21</td>
														<td>22</td>
														<td>23</td>
														<td>24</td>
														<td>25</td>
														<td>26</td>
														<td>27</td>
													</tr>
													<tr>
														<td>28</td>
														<td>29</td>
														<td>30</td>
														<td>31</td>
														<td class="text-muted bg-faded">1</td>
														<td class="text-muted bg-faded">2</td>
														<td class="text-muted bg-faded">3</td>
													</tr>
												</table>
											</div>
											<div class="flex-1 custom-scroll">
												<div class="p-2">
													<div class="d-flex align-items-center text-left mb-3">
														<div
															class="width-5 fw-300 text-primary l-h-n mr-1 align-self-start fs-xxl">
															15</div>
														<div class="flex-1">
															<div class="d-flex flex-column">
																<span class="l-h-n fs-md fw-500 opacity-70">
																	October 2020 </span> <span
																	class="l-h-n fs-nano fw-400 text-secondary">
																	Friday </span>
															</div>
															<div class="mt-3">
																<p>
																	<strong>2:30PM</strong> - Doctor's appointment
																</p>
																<p>
																	<strong>3:30PM</strong> - Report overview
																</p>
																<p>
																	<strong>4:30PM</strong> - Meeting with Donnah V.
																</p>
																<p>
																	<strong>5:30PM</strong> - Late Lunch
																</p>
																<p>
																	<strong>6:30PM</strong> - Report Compression
																</p>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div
									class="py-2 px-3 bg-faded d-block rounded-bottom text-right border-faded border-bottom-0 border-right-0 border-left-0">
									<a th:href="@{/system/remind}" class="fs-xs fw-500 ml-auto">view all
										notifications</a>
								</div>
							</div>
						</div>
						<!-- app user menu -->
						<div>
							<a href="#" data-toggle="dropdown"
								title="drlantern@gotbootstrap.com"
								class="header-icon d-flex align-items-center justify-content-center ml-2">
								<img src="img/demo/avatars/avatar-admin.png"
								class="profile-image rounded-circle" alt="Dr. Codex Lantern">
								<!-- you can also add username next to the avatar with the codes below:
									<span class="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
									<i class="ni ni-chevron-down hidden-xs-down"></i> -->
							</a>
							<div class="dropdown-menu dropdown-menu-animated dropdown-lg">
								<div
									class="dropdown-header bg-trans-gradient d-flex flex-row py-4 rounded-top">
									<div
										class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
										<span class="mr-2"> <img
											src="img/demo/avatars/avatar-admin.png"
											class="rounded-circle profile-image" alt="Dr. Codex Lantern">
										</span>
										<div class="info-card-text" th:object="${user}">
											<div class="fs-lg text-truncate text-truncate-lg" th:text="${user.userName}">
												</div>
											<span class="text-truncate text-truncate-md opacity-80" th:text="${user.email}"></span>
										</div>
									</div>
								</div>
								<div class="dropdown-divider m-0"></div>
								<a href="#" class="dropdown-item" data-action="app-reset"> <span
									data-i18n="drpdwn.reset_layout">Reset Layout</span>
								</a> <a href="#" class="dropdown-item" data-toggle="modal"
									data-target=".js-modal-settings"> <span
									data-i18n="drpdwn.settings">Settings</span>
								</a>
								<div class="dropdown-divider m-0"></div>
								<a href="#" class="dropdown-item" data-action="app-fullscreen">
									<span data-i18n="drpdwn.fullscreen">Fullscreen</span> <i
									class="float-right text-muted fw-n">F11</i>
								</a> <a href="#" class="dropdown-item" data-action="app-print">
									<span data-i18n="drpdwn.print">Print</span> <i
									class="float-right text-muted fw-n">Ctrl + P</i>
								</a>
								<div class="dropdown-multilevel dropdown-multilevel-left">
									<div class="dropdown-item">Language</div>
									<div class="dropdown-menu">
										<a href="#?lang=fr" class="dropdown-item" data-action="lang"
											data-lang="fr">Français</a> <a href="#?lang=en"
											class="dropdown-item active" data-action="lang"
											data-lang="en">English (US)</a> <a href="#?lang=es"
											class="dropdown-item" data-action="lang" data-lang="es">Español</a>
										<a href="#?lang=ru" class="dropdown-item" data-action="lang"
											data-lang="ru">Русский язык</a> <a href="#?lang=jp"
											class="dropdown-item" data-action="lang" data-lang="jp">日本語</a>
										<a href="#?lang=ch" class="dropdown-item" data-action="lang"
											data-lang="ch">中文</a>
									</div>
								</div>
								<a class="dropdown-item fw-500 pt-3 pb-3" th:href="@{/lock}">
									<span data-i18n="drpdwn.page-logout">锁屏</span> <!-- <span
									class="float-right fw-n">&commat;codexlantern</span> -->
								</a>
								<div class="dropdown-divider m-0"></div>
								<a class="dropdown-item fw-500 pt-3 pb-3" th:href="@{/logout}">
									<span data-i18n="drpdwn.page-logout">退出登录</span> <span
									class="float-right fw-n">&commat;codexlantern</span>
								</a>
							</div>
						</div>
					</div>
				</header>
				<!-- END Page Header -->
				<!-- BEGIN Page Content -->
				<!-- the #js-page-content id is needed for some plugins to initialize -->
				<main id="js-page-content" role="main" class="page-content">
				<ol class="breadcrumb page-breadcrumb">
					<li class="breadcrumb-item"><a href="javascript:void(0);">SmartAdmin</a></li>
					<li class="breadcrumb-item">首页</li><!-- Application Intel -->
					<li class="breadcrumb-item active">仪表盘</li> <!-- Analytics Dashboard -->
					<li class="position-absolute pos-top pos-right d-none d-sm-block"><span
						class="js-get-date"></span></li>
				</ol>
				<div class="subheader">
					<h1 class="subheader-title">
						<i class='subheader-icon fal fa-chart-area'></i> 仪表盘<!-- Analytics --> <span
							class='fw-300'><!-- Dashboard --></span>
					</h1>
					<!-- <div class="subheader-block d-lg-flex align-items-center">
						<div class="d-inline-flex flex-column justify-content-center mr-3">
							<span class="fw-300 fs-xs d-block opacity-50"> <small>EXPENSES</small>
							</span> <span class="fw-500 fs-xl d-block color-primary-500">
								$47,000 </span>
						</div>
						<span class="sparklines hidden-lg-down" sparkType="bar"
							sparkBarColor="#886ab5" sparkHeight="32px" sparkBarWidth="5px"
							values="3,4,3,6,7,3,3,6,2,6,4"></span>
					</div> -->
					<!-- <div
						class="subheader-block d-lg-flex align-items-center border-faded border-right-0 border-top-0 border-bottom-0 ml-3 pl-3">
						<div class="d-inline-flex flex-column justify-content-center mr-3">
							<span class="fw-300 fs-xs d-block opacity-50"> <small>MY
									PROFITS</small>
							</span> <span class="fw-500 fs-xl d-block color-danger-500">
								$38,500 </span>
						</div>
						<span class="sparklines hidden-lg-down" sparkType="bar"
							sparkBarColor="#fe6bb0" sparkHeight="32px" sparkBarWidth="5px"
							values="1,4,3,6,5,3,9,6,5,9,7"></span>
					</div> -->
				</div>
				<!-- 指标卡 -->
				<div class="row">
	                <div class="col-sm-6 col-xl-3">
	                    <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
	                        <div class="">
	                            <h3 id="hireEmp" class="display-4 d-block l-h-n m-0 fw-500">
	                               	<!-- <span>30<span class="change up ml-2"><i class="fal fa-long-arrow-up mr-1"></i>20%</span></span> -->
	                                <small class="m-0 l-h-n">本月入职</small>
	                            </h3>
	                        </div>
	                        <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
	                    </div>
	                </div>
                    <div class="col-sm-6 col-xl-3">
                        <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
                            <div class="">
                                <h3 id="leaveEmp" class="display-4 d-block l-h-n m-0 fw-500">
                                   	<!-- <span>30<span class="change down ml-2"><i class="fal fa-long-arrow-down mr-1"></i>20%</span></span> -->
                                    <small class="m-0 l-h-n">本月离职</small>
                                </h3>
                            </div>
                            <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 6rem;"></i>
                        </div>
                    </div>
                    <div class="col-sm-6 col-xl-3">
                        <div class="p-3 bg-secondary rounded overflow-hidden position-relative text-white mb-g">
                            <div class="">
                                <h3 id="confirmEmp" class="display-4 d-block l-h-n m-0 fw-500">
                                   <!-- 	<span>30<span class="change up ml-2"><i class="fal fa-long-arrow-up mr-1"></i>20%</span></span> -->
                                    <small class="m-0 l-h-n">本月转正</small>
                                </h3>
                            </div>
                            <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6" style="font-size: 8rem;"></i>
                        </div>
                    </div>
                   
                    <div class="col-sm-6 col-xl-3">
                        <div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
                            <div class="">
                                <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                   	<span>-<!-- <span class="change up ml-2"><i class="fal fa-long-arrow-up mr-1"></i></span> --></span>
                                    <small class="m-0 l-h-n">本月调岗</small>
                                </h3>
                            </div>
                            <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
                        </div>
                    </div>
                </div>
				<div class="row">
					<!-- 本年度各月在职人数统计 -->
					<div class="col-lg-12">
						<div class="panel">
	                        <div class="panel-hdr">
	                            <h2>本年度各月在职人数统计</h2>
	                        </div>
	                        <div class="panel-container show">
	                            <div class="panel-content">
	                                <div id="main1" style="width: 100%; height: 400px;"></div>
	                            </div>
	                        </div>
						</div>
					</div>
					<!-- 各部门成本 -->
					<div class="col-lg-12">
						<div class="panel">
	                        <div class="panel-hdr">
	                            <h2>各部门成本</h2>
	                        </div>
	                        <div class="panel-container show">
	                            <div class="panel-content">
	                                <div id="main2" style="width: 100%; height: 400px;"></div>
	                            </div>
	                        </div>
						</div>
					</div>
					<!-- 在职人员结构 -->
					<div class="col-lg-12">
						<div class="panel">
	                        <div class="panel-hdr">
	                            <h2>在职人员结构</h2>
	                        </div>
	                        <div class="panel-container show">
	                            <div class="panel-content">
	                                <div id="main3" style="width: 100%; height: 400px;"></div>
	                            </div>
	                        </div>
						</div>
					</div>
					<!-- 考勤效能分析 -->
					<div class="col-lg-12">
						<div class="panel">
	                        <div class="panel-hdr">
	                            <h2>考勤效能分析</h2>
	                        </div>
	                        <div class="panel-container show">
	                            <div class="panel-content">
	                                <div id="main4" style="width: 100%; height: 400px;"></div>
	                            </div>
	                        </div>
						</div>
					</div>
					<!-- <div class="col-lg-12">
						<div id="panel-1" class="panel panel-locked"
							data-panel-lock="false" data-panel-close="false"
							data-panel-fullscreen="false" data-panel-collapsed="false"
							data-panel-color="false" data-panel-locked="false"
							data-panel-refresh="false" data-panel-reset="false">
							<div class="panel-hdr">
								<h2>Live Feeds</h2>
								<div class="panel-toolbar pr-3 align-self-end">
									<ul id="demo_panel-tabs"
										class="nav nav-tabs border-bottom-0 nav-tabs-clean"
										role="tablist">
										<li class="nav-item"><a class="nav-link active"
											data-toggle="tab" href="#tab_default-1" role="tab">Live
												Stats</a></li>
										<li class="nav-item"><a class="nav-link"
											data-toggle="tab" href="#tab_default-2" role="tab">Revenue</a>
										</li>
									</ul>
								</div>
							</div>
							<div class="panel-container show">
								<div
									class="panel-content border-faded border-left-0 border-right-0 border-top-0">
									<div class="row no-gutters">
										<div class="col-lg-7 col-xl-8">
											<div class="position-relative">
												<div
													class="custom-control custom-switch position-absolute pos-top pos-left ml-5 mt-3 z-index-cloud">
													<input type="checkbox" class="custom-control-input"
														id="start_interval"> <label
														class="custom-control-label" for="start_interval">Live
														Update</label>
												</div>
												<div id="updating-chart" style="height: 242px"></div>
											</div>
										</div>
										<div class="col-lg-5 col-xl-4 pl-lg-3">
											<div class="d-flex mt-2">
												My Tasks <span class="d-inline-block ml-auto">130 /
													500</span>
											</div>
											<div class="progress progress-sm mb-3">
												<div class="progress-bar bg-fusion-400" role="progressbar"
													style="width: 65%;" aria-valuenow="65" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="d-flex">
												Transfered <span class="d-inline-block ml-auto">440
													TB</span>
											</div>
											<div class="progress progress-sm mb-3">
												<div class="progress-bar bg-success-500" role="progressbar"
													style="width: 34%;" aria-valuenow="34" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="d-flex">
												Bugs Squashed <span class="d-inline-block ml-auto">77%</span>
											</div>
											<div class="progress progress-sm mb-3">
												<div class="progress-bar bg-info-400" role="progressbar"
													style="width: 77%;" aria-valuenow="77" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="d-flex">
												User Testing <span class="d-inline-block ml-auto">7
													days</span>
											</div>
											<div class="progress progress-sm mb-g">
												<div class="progress-bar bg-primary-300" role="progressbar"
													style="width: 84%;" aria-valuenow="84" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="row no-gutters">
												<div class="col-6 pr-1">
													<a href="#" class="btn btn-default btn-block">Generate
														PDF</a>
												</div>
												<div class="col-6 pl-1">
													<a href="#" class="btn btn-default btn-block">Report a
														Bug</a>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="panel-content p-0">
									<div class="row row-grid no-gutters">
										<div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
											<div class="px-3 py-2 d-flex align-items-center">
												<div
													class="js-easy-pie-chart color-primary-300 position-relative d-inline-flex align-items-center justify-content-center"
													data-percent="75" data-piesize="50" data-linewidth="5"
													data-linecap="butt" data-scalelength="0">
													<div
														class="d-flex flex-column align-items-center justify-content-center position-absolute pos-left pos-right pos-top pos-bottom fw-300 fs-lg">
														<span class="js-percent d-block text-dark"></span>
													</div>
												</div>
												<span class="d-inline-block ml-2 text-muted"> SERVER
													LOAD <i class="fal fa-caret-up color-danger-500 ml-1"></i>
												</span>
												<div class="ml-auto d-inline-flex align-items-center">
													<div class="sparklines d-inline-flex" sparktype="line"
														sparkheight="30" sparkwidth="70" sparklinecolor="#886ab5"
														sparkfillcolor="false" sparklinewidth="1"
														values="5,6,5,3,8,6,9,7,4,2"></div>
													<div class="d-inline-flex flex-column small ml-2">
														<span
															class="d-inline-block badge badge-success opacity-50 text-center p-1 width-6">97%</span>
														<span
															class="d-inline-block badge bg-fusion-300 opacity-50 text-center p-1 width-6 mt-1">44%</span>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
											<div class="px-3 py-2 d-flex align-items-center">
												<div
													class="js-easy-pie-chart color-success-500 position-relative d-inline-flex align-items-center justify-content-center"
													data-percent="79" data-piesize="50" data-linewidth="5"
													data-linecap="butt">
													<div
														class="d-flex flex-column align-items-center justify-content-center position-absolute pos-left pos-right pos-top pos-bottom fw-300 fs-lg">
														<span class="js-percent d-block text-dark"></span>
													</div>
												</div>
												<span class="d-inline-block ml-2 text-muted"> DISK
													SPACE <i class="fal fa-caret-down color-success-500 ml-1"></i>
												</span>
												<div class="ml-auto d-inline-flex align-items-center">
													<div class="sparklines d-inline-flex" sparktype="line"
														sparkheight="30" sparkwidth="70" sparklinecolor="#1dc9b7"
														sparkfillcolor="false" sparklinewidth="1"
														values="5,9,7,3,5,2,5,3,9,6"></div>
													<div class="d-inline-flex flex-column small ml-2">
														<span
															class="d-inline-block badge badge-info opacity-50 text-center p-1 width-6">76%</span>
														<span
															class="d-inline-block badge bg-warning-300 opacity-50 text-center p-1 width-6 mt-1">3%</span>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
											<div class="px-3 py-2 d-flex align-items-center">
												<div
													class="js-easy-pie-chart color-info-500 position-relative d-inline-flex align-items-center justify-content-center"
													data-percent="23" data-piesize="50" data-linewidth="5"
													data-linecap="butt">
													<div
														class="d-flex flex-column align-items-center justify-content-center position-absolute pos-left pos-right pos-top pos-bottom fw-300 fs-lg">
														<span class="js-percent d-block text-dark"></span>
													</div>
												</div>
												<span class="d-inline-block ml-2 text-muted"> DATA
													TTF <i class="fal fa-caret-up color-success-500 ml-1"></i>
												</span>
												<div class="ml-auto d-inline-flex align-items-center">
													<div class="sparklines d-inline-flex" sparktype="line"
														sparkheight="30" sparkwidth="70" sparklinecolor="#51adf6"
														sparkfillcolor="false" sparklinewidth="1"
														values="3,5,2,5,3,9,6,5,9,7"></div>
													<div class="d-inline-flex flex-column small ml-2">
														<span
															class="d-inline-block badge bg-fusion-500 opacity-50 text-center p-1 width-6">10GB</span>
														<span
															class="d-inline-block badge bg-fusion-300 opacity-50 text-center p-1 width-6 mt-1">10%</span>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
											<div class="px-3 py-2 d-flex align-items-center">
												<div
													class="js-easy-pie-chart color-fusion-500 position-relative d-inline-flex align-items-center justify-content-center"
													data-percent="36" data-piesize="50" data-linewidth="5"
													data-linecap="butt">
													<div
														class="d-flex flex-column align-items-center justify-content-center position-absolute pos-left pos-right pos-top pos-bottom fw-300 fs-lg">
														<span class="js-percent d-block text-dark"></span>
													</div>
												</div>
												<span class="d-inline-block ml-2 text-muted"> TEMP. <i
													class="fal fa-caret-down color-success-500 ml-1"></i>
												</span>
												<div class="ml-auto d-inline-flex align-items-center">
													<div class="sparklines d-inline-flex" sparktype="line"
														sparkheight="30" sparkwidth="70" sparklinecolor="#fd3995"
														sparkfillcolor="false" sparklinewidth="1"
														values="5,3,9,6,5,9,7,3,5,2"></div>
													<div class="d-inline-flex flex-column small ml-2">
														<span
															class="d-inline-block badge badge-danger opacity-50 text-center p-1 width-6">124</span>
														<span
															class="d-inline-block badge bg-info-300 opacity-50 text-center p-1 width-6 mt-1">40F</span>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div> -->
					<!-- <div class="col-lg-6">
						<div id="panel-2" class="panel" data-panel-fullscreen="false">
							<div class="panel-hdr">
								<h2>Smart Chat</h2>
							</div>
							<div class="panel-container show">
								<div class="panel-content p-0">
									<div class="d-flex flex-column">
										<div class="bg-subtlelight-fade custom-scroll"
											style="height: 244px">
											<div class="h-100">
												message
												<div class="d-flex flex-row px-3 pt-3 pb-2">
													profile photo : lazy loaded
													<span class="status status-danger"> <span
														class="profile-image rounded-circle d-inline-block"
														style="background-image: url('img/demo/avatars/avatar-j.png')"></span>
													</span>
													profile photo end
													<div class="ml-3">
														<a href="javascript:void(0);" title="Lisa Hatchensen"
															class="d-block fw-700 text-dark">Lisa Hatchensen</a> Hey
														did you meet the new board of director? He's a bit of a
														geek if you ask me...anyway here is the report you
														requested. I am off to launch with Lisa and Andrew, you
														wanna join?
														file download
														<div class="d-flex mt-3 flex-wrap">
															<div class="btn-group mr-1 mt-1" role="group"
																aria-label="Button group with nested dropdown ">
																<button type="button"
																	class="btn btn-default btn-xs btn-block px-1 py-1 fw-500"
																	data-action="toggle">
																	<span class="d-block text-truncate text-truncate-sm">
																		<i class="fal fa-file-pdf mr-1 color-danger-700"></i>
																		Report-2013-demographic-repo
																	</span>
																</button>
																<div class="btn-group" role="group">
																	<button id="btnGroupDrop1" type="button"
																		class="btn btn-default btn-xs dropdown-toggle px-2 js-waves-off"
																		data-toggle="dropdown" aria-haspopup="true"
																		aria-expanded="false"></button>
																	<div class="dropdown-menu p-0 fs-xs"
																		aria-labelledby="btnGroupDrop1">
																		<a class="dropdown-item px-3 py-2" href="#">Forward</a>
																		<a class="dropdown-item px-3 py-2" href="#">Open</a> <a
																			class="dropdown-item px-3 py-2" href="#">Delete</a>
																	</div>
																</div>
															</div>
															<div class="btn-group mr-1 mt-1" role="group"
																aria-label="Button group with nested dropdown ">
																<button type="button"
																	class="btn btn-default btn-xs btn-block px-1 py-1 fw-500"
																	data-action="toggle">
																	<span class="d-block text-truncate text-truncate-sm">
																		<i class="fal fa-file-pdf mr-1 color-danger-700"></i>
																		Bloodworks Patient 34124BA
																	</span>
																</button>
																<div class="btn-group" role="group">
																	<button id="btnGroupDrop2" type="button"
																		class="btn btn-default btn-xs dropdown-toggle px-2 js-waves-off"
																		data-toggle="dropdown" aria-haspopup="true"
																		aria-expanded="false"></button>
																	<div class="dropdown-menu p-0 fs-xs"
																		aria-labelledby="btnGroupDrop2">
																		<a class="dropdown-item px-3 py-2" href="#">Forward</a>
																		<a class="dropdown-item px-3 py-2" href="#">Open</a> <a
																			class="dropdown-item px-3 py-2" href="#">Delete</a>
																	</div>
																</div>
															</div>
														</div>
														file download end
													</div>
												</div>
												message end
												message reply
												<div class="d-flex flex-row px-3 pt-3 pb-2">
													profile photo : lazy loaded
													<span class="status status-danger"> <span
														class="profile-image rounded-circle d-inline-block"
														style="background-image: url('img/demo/avatars/avatar-admin.png')"></span>
													</span>
													profile photo end
													<div class="ml-3">
														<a href="javascript:void(0);" title="Lisa Hatchensen"
															class="d-block fw-700 text-dark">Dr. Codex Lantern</a>
														Thanks for the file! You guys go ahead, I have to call
														some of my patients.
													</div>
												</div>
												message reply end
											</div>
										</div>
									</div>
								</div>
								<div
									class="panel-content border-faded border-left-0 border-right-0 border-bottom-0 bg-faded">
									<textarea rows="3"
										class="form-control rounded-top border-bottom-left-radius-0 border-bottom-right-radius-0 border"
										placeholder="write a reply..."></textarea>
									<div
										class="d-flex align-items-center py-2 px-2 bg-white border border-top-0 rounded-bottom">
										<div class="btn-group dropup">
											<button type="button"
												class="btn btn-icon fs-lg dropdown-toggle no-arrow"
												data-toggle="dropdown" aria-haspopup="true"
												aria-expanded="false">
												<i class="fal fa-smile"></i>
											</button>
											<div
												class="dropdown-menu dropdown-menu-animated text-center rounded-pill overflow-hidden"
												style="width: 280px">
												<div class="px-1 py-0">
													<a href="javascript:void(0);" class="emoji emoji--like"
														data-toggle="tooltip" data-placement="top" title=""
														data-original-title="Like">
														<div class="emoji__hand">
															<div class="emoji__thumb"></div>
														</div>
													</a> <a href="javascript:void(0);" class="emoji emoji--love"
														data-toggle="tooltip" data-placement="top" title=""
														data-original-title="Love">
														<div class="emoji__heart"></div>
													</a> <a href="javascript:void(0);" class="emoji emoji--haha"
														data-toggle="tooltip" data-placement="top" title=""
														data-original-title="Haha">
														<div class="emoji__face">
															<div class="emoji__eyes"></div>
															<div class="emoji__mouth">
																<div class="emoji__tongue"></div>
															</div>
														</div>
													</a> <a href="javascript:void(0);" class="emoji emoji--yay"
														data-toggle="tooltip" data-placement="top" title=""
														data-original-title="Yay">
														<div class="emoji__face">
															<div class="emoji__eyebrows"></div>
															<div class="emoji__mouth"></div>
														</div>
													</a> <a href="javascript:void(0);" class="emoji emoji--wow"
														data-toggle="tooltip" data-placement="top" title=""
														data-original-title="Wow">
														<div class="emoji__face">
															<div class="emoji__eyebrows"></div>
															<div class="emoji__eyes"></div>
															<div class="emoji__mouth"></div>
														</div>
													</a> <a href="javascript:void(0);" class="emoji emoji--sad"
														data-toggle="tooltip" data-placement="top" title=""
														data-original-title="Sad">
														<div class="emoji__face">
															<div class="emoji__eyebrows"></div>
															<div class="emoji__eyes"></div>
															<div class="emoji__mouth"></div>
														</div>
													</a> <a href="javascript:void(0);" class="emoji emoji--angry"
														data-toggle="tooltip" data-placement="top" title=""
														data-original-title="Angry">
														<div class="emoji__face">
															<div class="emoji__eyebrows"></div>
															<div class="emoji__eyes"></div>
															<div class="emoji__mouth"></div>
														</div>
													</a>
												</div>
											</div>
										</div>
										<button type="button" class="btn btn-icon fs-lg">
											<i class="fal fa-paperclip"></i>
										</button>
										<div
											class="custom-control custom-checkbox custom-control-inline ml-auto hidden-sm-down">
											<input type="checkbox" class="custom-control-input"
												id="defaultInline1"> <label
												class="custom-control-label" for="defaultInline1">Press
												<strong>ENTER</strong> to send
											</label>
										</div>
										<button class="btn btn-primary btn-sm ml-auto ml-sm-0">
											Reply</button>
									</div>
								</div>
							</div>
						</div>
						<div id="panel-3" class="panel">
							<div class="panel-hdr">
								<h2 class="js-get-date"></h2>
							</div>
							<div class="panel-container show">
								<div class="panel-content">
									<div id="calendar"></div>
								</div>
							</div>
						</div>
					</div> -->
					<!-- <div class="col-lg-6">
						<div id="panel-4" class="panel">
							<div class="panel-hdr">
								<h2>Bird's Eyes</h2>
							</div>
							<div class="panel-container show">
								<div class="panel-content jqvmap-bg-ocean p-0"
									style="height: 330px;">
									<div id="vector-map" class="w-100 h-100 p-4"></div>
								</div>
								<div class="panel-content jqvmap-bg-ocean">
									<div class="d-flex align-items-center">
										<img class="d-inline-block js-jqvmap-flag mr-3 border-faded"
											alt="flag"
											src="https://lipis.github.io/flag-icon-css/flags/4x3/us.svg"
											style="width: 55px; height: auto;">
										<h4 class="d-inline-block fw-300 m-0 text-muted fs-lg">
											Showcasing information: <small
												class="js-jqvmap-country mb-0 fw-500 text-dark">United
												States of America - $3,760,125.00</small>
										</h4>
									</div>
								</div>
							</div>
						</div>
						<div id="panel-5" class="panel">
							<div class="panel-hdr">
								<h2>Subscriptions Hourly</h2>
							</div>
							<div class="panel-container show">
								<div class="panel-content">
									<h5>Subscription Views / hour</h5>
									<div id="flotBar1" style="width: 100%; height: 160px;"></div>
								</div>
							</div>
						</div>
						<div id="panel-6" class="panel">
							<div class="panel-hdr">
								<h2>Secession Scale</h2>
							</div>
							<div class="panel-container show">
								<div class="panel-content p-0 mb-g">
									<div
										class="alert alert-success alert-dismissible fade show border-faded border-left-0 border-right-0 border-top-0 rounded-0 m-0"
										role="alert">
										<button type="button" class="close" data-dismiss="alert"
											aria-label="Close">
											<span aria-hidden="true"><i class="fal fa-times"></i></span>
										</button>
										<strong>Last update was on <span class="js-get-date"></span></strong>
										- Your logs are all up to date.
									</div>
								</div>
								<div class="panel-content">
									<div class="row  mb-g">
										<div class="col-md-6 d-flex align-items-center">
											<div id="flotPie" class="w-100" style="height: 250px"></div>
										</div>
										<div class="col-md-6 col-lg-5 mr-lg-auto">
											<div class="d-flex mt-2 mb-1 fs-xs text-primary">
												Current Usage</div>
											<div class="progress progress-xs mb-3">
												<div class="progress-bar" role="progressbar"
													style="width: 70%;" aria-valuenow="70" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="d-flex mt-2 mb-1 fs-xs text-info">Net Usage
											</div>
											<div class="progress progress-xs mb-3">
												<div class="progress-bar bg-info-500" role="progressbar"
													style="width: 30%;" aria-valuenow="30" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="d-flex mt-2 mb-1 fs-xs text-warning">Users
												blocked</div>
											<div class="progress progress-xs mb-3">
												<div class="progress-bar bg-warning-500" role="progressbar"
													style="width: 40%;" aria-valuenow="40" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="d-flex mt-2 mb-1 fs-xs text-danger">Custom
												cases</div>
											<div class="progress progress-xs mb-3">
												<div class="progress-bar bg-danger-500" role="progressbar"
													style="width: 15%;" aria-valuenow="15" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="d-flex mt-2 mb-1 fs-xs text-success">Test
												logs</div>
											<div class="progress progress-xs mb-3">
												<div class="progress-bar bg-success-500" role="progressbar"
													style="width: 25%;" aria-valuenow="25" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="d-flex mt-2 mb-1 fs-xs text-dark">Uptime
												records</div>
											<div class="progress progress-xs mb-3">
												<div class="progress-bar bg-fusion-500" role="progressbar"
													style="width: 10%;" aria-valuenow="10" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div> -->
				</div>
				</main>
				<!-- this overlay is activated only when mobile menu is triggered -->
				<div class="page-content-overlay" data-action="toggle"
					data-class="mobile-nav-on"></div>
				<!-- END Page Content -->
				<!-- BEGIN Page Footer -->
				<footer class="page-footer" role="contentinfo">
					<div class="d-flex align-items-center flex-1 text-muted">
						<span class="hidden-md-down fw-700">
							Copyright © 2020 Read-in Smart Technology Co.,Ltd All Rights Reserved. 
						</span>
					</div>
					<div>
						<ul class="list-table m-0">
							<li><a href="intel_introduction.html"
								class="text-secondary fw-700">About</a></li>
							<li class="pl-3"><a href="info_app_licensing.html"
								class="text-secondary fw-700">License</a></li>
							<li class="pl-3"><a href="info_app_docs.html"
								class="text-secondary fw-700">Documentation</a></li>
							<li class="pl-3 fs-xl"><a
								href="https://wrapbootstrap.com/user/MyOrange"
								class="text-secondary" target="_blank"><i
									class="fal fa-question-circle" aria-hidden="true"></i></a></li>
						</ul>
					</div>
				</footer>
				<!-- END Page Footer -->
				<!-- BEGIN Shortcuts -->
				<div class="modal fade modal-backdrop-transparent"
					id="modal-shortcut" tabindex="-1" role="dialog"
					aria-labelledby="modal-shortcut" aria-hidden="true">
					<div class="modal-dialog modal-dialog-top modal-transparent"
						role="document">
						<div class="modal-content">
							<div class="modal-body">
								<ul class="app-list w-auto h-auto p-0 text-left">
									<li><a href="intel_introduction.html"
										class="app-list-item text-white border-0 m-0">
											<div class="icon-stack">
												<i
													class="base base-7 icon-stack-3x opacity-100 color-primary-500 "></i>
												<i
													class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
												<i class="fal fa-home icon-stack-1x opacity-100 color-white"></i>
											</div> <span class="app-list-name"> Home </span>
									</a></li>
									<li><a href="page_inbox_general.html"
										class="app-list-item text-white border-0 m-0">
											<div class="icon-stack">
												<i
													class="base base-7 icon-stack-3x opacity-100 color-success-500 "></i>
												<i
													class="base base-7 icon-stack-2x opacity-100 color-success-300 "></i>
												<i class="ni ni-envelope icon-stack-1x text-white"></i>
											</div> <span class="app-list-name"> Inbox </span>
									</a></li>
									<li><a href="intel_introduction.html"
										class="app-list-item text-white border-0 m-0">
											<div class="icon-stack">
												<i
													class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
												<i class="fal fa-plus icon-stack-1x opacity-100 color-white"></i>
											</div> <span class="app-list-name"> Add More </span>
									</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- END Shortcuts -->
				<!-- BEGIN Color profile -->
				<!-- this area is hidden and will not be seen on screens or screen readers -->
				<!-- we use this only for CSS color refernce for JS stuff -->
				<p id="js-color-profile" class="d-none">
					<span class="color-primary-50"></span> <span
						class="color-primary-100"></span> <span class="color-primary-200"></span>
					<span class="color-primary-300"></span> <span
						class="color-primary-400"></span> <span class="color-primary-500"></span>
					<span class="color-primary-600"></span> <span
						class="color-primary-700"></span> <span class="color-primary-800"></span>
					<span class="color-primary-900"></span> <span class="color-info-50"></span>
					<span class="color-info-100"></span> <span class="color-info-200"></span>
					<span class="color-info-300"></span> <span class="color-info-400"></span>
					<span class="color-info-500"></span> <span class="color-info-600"></span>
					<span class="color-info-700"></span> <span class="color-info-800"></span>
					<span class="color-info-900"></span> <span class="color-danger-50"></span>
					<span class="color-danger-100"></span> <span
						class="color-danger-200"></span> <span class="color-danger-300"></span>
					<span class="color-danger-400"></span> <span
						class="color-danger-500"></span> <span class="color-danger-600"></span>
					<span class="color-danger-700"></span> <span
						class="color-danger-800"></span> <span class="color-danger-900"></span>
					<span class="color-warning-50"></span> <span
						class="color-warning-100"></span> <span class="color-warning-200"></span>
					<span class="color-warning-300"></span> <span
						class="color-warning-400"></span> <span class="color-warning-500"></span>
					<span class="color-warning-600"></span> <span
						class="color-warning-700"></span> <span class="color-warning-800"></span>
					<span class="color-warning-900"></span> <span
						class="color-success-50"></span> <span class="color-success-100"></span>
					<span class="color-success-200"></span> <span
						class="color-success-300"></span> <span class="color-success-400"></span>
					<span class="color-success-500"></span> <span
						class="color-success-600"></span> <span class="color-success-700"></span>
					<span class="color-success-800"></span> <span
						class="color-success-900"></span> <span class="color-fusion-50"></span>
					<span class="color-fusion-100"></span> <span
						class="color-fusion-200"></span> <span class="color-fusion-300"></span>
					<span class="color-fusion-400"></span> <span
						class="color-fusion-500"></span> <span class="color-fusion-600"></span>
					<span class="color-fusion-700"></span> <span
						class="color-fusion-800"></span> <span class="color-fusion-900"></span>
				</p>
				<!-- END Color profile -->
			</div>
		</div>
	</div>
	<!-- END Page Wrapper -->
	<!-- BEGIN Quick Menu -->
	<!-- to add more items, please make sure to change the variable '$menu-items: number;' in your _page-components-shortcut.scss -->
	<nav class="shortcut-menu d-none d-sm-block">
		<input type="checkbox" class="menu-open" name="menu-open"
			id="menu_open" /> <label for="menu_open" class="menu-open-button ">
			<span class="app-shortcut-icon d-block"></span>
		</label> <a href="#" class="menu-item btn" data-toggle="tooltip"
			data-placement="left" title="Scroll Top"> <i
			class="fal fa-arrow-up"></i>
		</a> <a href="page_login.html" class="menu-item btn" data-toggle="tooltip"
			data-placement="left" title="Logout"> <i class="fal fa-sign-out"></i>
		</a> <a href="#" class="menu-item btn" data-action="app-fullscreen"
			data-toggle="tooltip" data-placement="left" title="Full Screen">
			<i class="fal fa-expand"></i>
		</a> <a href="#" class="menu-item btn" data-action="app-print"
			data-toggle="tooltip" data-placement="left" title="Print page"> <i
			class="fal fa-print"></i>
		</a> <a href="#" class="menu-item btn" data-action="app-voice"
			data-toggle="tooltip" data-placement="left" title="Voice command">
			<i class="fal fa-microphone"></i>
		</a>
	</nav>
	<!-- END Quick Menu -->
	<!-- BEGIN Messenger -->
	<div class="modal fade js-modal-messenger modal-backdrop-transparent"
		tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-dialog-right">
			<div class="modal-content h-100">
				<div
					class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
					<div
						class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
						<span class="mr-2"> <span
							class="rounded-circle profile-image d-block"
							style="background-image: url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
						</span>
						<div class="info-card-text">
							<a href="javascript:void(0);"
								class="fs-lg text-truncate text-truncate-lg text-white"
								data-toggle="dropdown" aria-expanded="false"> Tracey Chang <i
								class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
							</a>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Send Email</a> <a
									class="dropdown-item" href="#">Create Appointment</a> <a
									class="dropdown-item" href="#">Block User</a>
							</div>
							<span class="text-truncate text-truncate-md opacity-80">IT
								Director</span>
						</div>
					</div>
					<button type="button"
						class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
						data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true"><i class="fal fa-times"></i></span>
					</button>
				</div>
				<div class="modal-body p-0 h-100 d-flex">
					<!-- BEGIN msgr-list -->
					<div
						class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
						<div>
							<div
								class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
								<i class="fal fa-search"></i>
							</div>
							<input type="text" class="form-control bg-white"
								id="msgr_listfilter_input" placeholder="Filter contacts"
								aria-label="FriendSearch" data-listfilter="#js-msgr-listfilter">
						</div>
						<div class="flex-1 h-100 custom-scroll">
							<div class="w-100">
								<ul id="js-msgr-listfilter" class="list-unstyled m-0">
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="tracey chang online">
											<div
												class="d-table-cell align-middle status status-success status-sm ">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													Tracey Chang <small
														class="d-block font-italic text-success fs-xs">
														Online </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="oliver kopyuv online">
											<div
												class="d-table-cell align-middle status status-success status-sm ">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													Oliver Kopyuv <small
														class="d-block font-italic text-success fs-xs">
														Online </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="dr john cook phd away">
											<div
												class="d-table-cell align-middle status status-warning status-sm ">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													Dr. John Cook PhD <small class="d-block font-italic fs-xs">
														Away </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="ali amdaney online">
											<div
												class="d-table-cell align-middle status status-success status-sm ">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													Ali Amdaney <small
														class="d-block font-italic fs-xs text-success">
														Online </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="sarah mcbrook online">
											<div
												class="d-table-cell align-middle status status-success status-sm">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													Sarah McBrook <small
														class="d-block font-italic fs-xs text-success">
														Online </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="ali amdaney offline">
											<div class="d-table-cell align-middle status status-sm">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													oliver.kopyuv@gotbootstrap.com <small
														class="d-block font-italic fs-xs"> Offline </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="ali amdaney busy">
											<div
												class="d-table-cell align-middle status status-danger status-sm">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-j.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													oliver.kopyuv@gotbootstrap.com <small
														class="d-block font-italic fs-xs text-danger">
														Busy </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="ali amdaney offline">
											<div class="d-table-cell align-middle status status-sm">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													oliver.kopyuv@gotbootstrap.com <small
														class="d-block font-italic fs-xs"> Offline </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="ali amdaney inactive">
											<div class="d-table-cell align-middle">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-m.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													+714651347790 <small
														class="d-block font-italic fs-xs opacity-50">
														Missed Call </small>
												</div>
											</div>
									</a></li>
								</ul>
								<div class="filter-message js-filter-message"></div>
							</div>
						</div>
						<div>
							<a class="fs-xl d-flex align-items-center p-3"> <i
								class="fal fa-cogs"></i>
							</a>
						</div>
					</div>
					<!-- END msgr-list -->
					<!-- BEGIN msgr -->
					<div class="msgr d-flex h-100 flex-column bg-white">
						<!-- BEGIN custom-scroll -->
						<div class="custom-scroll flex-1 h-100">
							<div id="chat_container" class="w-100 p-4">
								<!-- start .chat-segment -->
								<div class="chat-segment">
									<div class="time-stamp text-center mb-2 fw-400">Jun 19</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-sent">
									<div class="chat-message">
										<p>Hey Tracey, did you get my files?</p>
									</div>
									<div class="text-right fw-300 text-muted mt-1 fs-xs">
										3:00 pm</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-get">
									<div class="chat-message">
										<p>Hi</p>
										<p>Sorry going through a busy time in office. Yes I
											analyzed the solution.</p>
										<p>It will require some resource, which I could not
											manage.</p>
									</div>
									<div class="fw-300 text-muted mt-1 fs-xs">3:24 pm</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-sent chat-start">
									<div class="chat-message">
										<p>Okay</p>
									</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-sent chat-end">
									<div class="chat-message">
										<p>Sending you some dough today, you can allocate the
											resources to this project.</p>
									</div>
									<div class="text-right fw-300 text-muted mt-1 fs-xs">
										3:26 pm</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-get chat-start">
									<div class="chat-message">
										<p>Perfect. Thanks a lot!</p>
									</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-get">
									<div class="chat-message">
										<p>I will have them ready by tonight.</p>
									</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-get chat-end">
									<div class="chat-message">
										<p>Cheers</p>
									</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment for timestamp -->
								<div class="chat-segment">
									<div class="time-stamp text-center mb-2 fw-400">Jun 20</div>
								</div>
								<!--  end .chat-segment for timestamp -->
							</div>
						</div>
						<!-- END custom-scroll  -->
						<!-- BEGIN msgr__chatinput -->
						<div class="d-flex flex-column">
							<div
								class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
								<div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
									<div id="msgr_input" contenteditable="true"
										data-placeholder="Type your message here..."
										class="height-10 form-content-editable"></div>
								</div>
							</div>
							<div
								class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
								<a href="javascript:void(0);"
									class="btn btn-icon fs-xl width-1 mr-1" data-toggle="tooltip"
									data-original-title="More options" data-placement="top"> <i
									class="fal fa-ellipsis-v-alt color-fusion-300"></i>
								</a> <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1"
									data-toggle="tooltip" data-original-title="Attach files"
									data-placement="top"> <i
									class="fal fa-paperclip color-fusion-300"></i>
								</a> <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1"
									data-toggle="tooltip" data-original-title="Insert photo"
									data-placement="top"> <i
									class="fal fa-camera color-fusion-300"></i>
								</a>
								<div class="ml-auto">
									<a href="javascript:void(0);" class="btn btn-info">Send</a>
								</div>
							</div>
						</div>
						<!-- END msgr__chatinput -->
					</div>
					<!-- END msgr -->
				</div>
			</div>
		</div>
	</div>
	<!-- END Messenger -->
	<!-- BEGIN Page Settings -->
	<div class="modal fade js-modal-settings modal-backdrop-transparent"
		tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-dialog-right modal-md">
			<div class="modal-content">
				<div
					class="dropdown-header bg-trans-gradient d-flex justify-content-center align-items-center w-100">
					<h4 class="m-0 text-center color-white">
						Layout Settings <small class="mb-0 opacity-80">User
							Interface Settings</small>
					</h4>
					<button type="button"
						class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
						data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true"><i class="fal fa-times"></i></span>
					</button>
				</div>
				<div class="modal-body p-0">
					<div class="settings-panel">
						<div class="mt-4 d-table w-100 px-5">
							<div class="d-table-cell align-middle">
								<h5 class="p-0">App Layout</h5>
							</div>
						</div>
						<div class="list" id="fh">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="header-function-fixed"></a> <span
								class="onoffswitch-title">Fixed Header</span> <span
								class="onoffswitch-title-desc">header is in a fixed at
								all times</span>
						</div>
						<div class="list" id="nff">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-function-fixed"></a> <span
								class="onoffswitch-title">Fixed Navigation</span> <span
								class="onoffswitch-title-desc">left panel is fixed</span>
						</div>
						<div class="list" id="nfm">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-function-minify"></a> <span
								class="onoffswitch-title">Minify Navigation</span> <span
								class="onoffswitch-title-desc">Skew nav to maximize space</span>
						</div>
						<div class="list" id="nfh">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-function-hidden"></a> <span
								class="onoffswitch-title">Hide Navigation</span> <span
								class="onoffswitch-title-desc">roll mouse on edge to
								reveal</span>
						</div>
						<div class="list" id="nft">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-function-top"></a> <span
								class="onoffswitch-title">Top Navigation</span> <span
								class="onoffswitch-title-desc">Relocate left pane to top</span>
						</div>
						<div class="list" id="fff">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="footer-function-fixed"></a> <span
								class="onoffswitch-title">Fixed Footer</span> <span
								class="onoffswitch-title-desc">page footer is fixed</span>
						</div>
						<div class="list" id="mmb">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-main-boxed"></a> <span
								class="onoffswitch-title">Boxed Layout</span> <span
								class="onoffswitch-title-desc">Encapsulates to a
								container</span>
						</div>
						<div class="expanded">
							<ul class="mb-3 mt-1">
								<li>
									<div class="bg-fusion-50" data-action="toggle"
										data-class="mod-bg-1"></div>
								</li>
								<li>
									<div class="bg-warning-200" data-action="toggle"
										data-class="mod-bg-2"></div>
								</li>
								<li>
									<div class="bg-primary-200" data-action="toggle"
										data-class="mod-bg-3"></div>
								</li>
								<li>
									<div class="bg-success-300" data-action="toggle"
										data-class="mod-bg-4"></div>
								</li>
								<li>
									<div class="bg-white border" data-action="toggle"
										data-class="mod-bg-none"></div>
								</li>
							</ul>
							<div class="list" id="mbgf">
								<a href="#" onclick="return false;" class="btn btn-switch"
									data-action="toggle" data-class="mod-fixed-bg"></a> <span
									class="onoffswitch-title">Fixed Background</span>
							</div>
						</div>
						<div class="mt-4 d-table w-100 px-5">
							<div class="d-table-cell align-middle">
								<h5 class="p-0">Mobile Menu</h5>
							</div>
						</div>
						<div class="list" id="nmp">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-mobile-push"></a> <span
								class="onoffswitch-title">Push Content</span> <span
								class="onoffswitch-title-desc">Content pushed on menu
								reveal</span>
						</div>
						<div class="list" id="nmno">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-mobile-no-overlay"></a> <span
								class="onoffswitch-title">No Overlay</span> <span
								class="onoffswitch-title-desc">Removes mesh on menu
								reveal</span>
						</div>
						<div class="list" id="sldo">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-mobile-slide-out"></a> <span
								class="onoffswitch-title">Off-Canvas <sup>(beta)</sup></span> <span
								class="onoffswitch-title-desc">Content overlaps menu</span>
						</div>
						<div class="mt-4 d-table w-100 px-5">
							<div class="d-table-cell align-middle">
								<h5 class="p-0">Accessibility</h5>
							</div>
						</div>
						<div class="list" id="mbf">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-bigger-font"></a> <span
								class="onoffswitch-title">Bigger Content Font</span> <span
								class="onoffswitch-title-desc">content fonts are bigger
								for readability</span>
						</div>
						<div class="list" id="mhc">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-high-contrast"></a> <span
								class="onoffswitch-title">High Contrast Text (WCAG 2 AA)</span>
							<span class="onoffswitch-title-desc">4.5:1 text contrast
								ratio</span>
						</div>
						<div class="list" id="mcb">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-color-blind"></a> <span
								class="onoffswitch-title">Daltonism <sup>(beta)</sup>
							</span> <span class="onoffswitch-title-desc">color vision
								deficiency</span>
						</div>
						<div class="list" id="mpc">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-pace-custom"></a> <span
								class="onoffswitch-title">Preloader Inside</span> <span
								class="onoffswitch-title-desc">preloader will be inside
								content</span>
						</div>
						<div class="list" id="mpi">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-panel-icon"></a> <span
								class="onoffswitch-title">SmartPanel Icons (not Panels)</span> <span
								class="onoffswitch-title-desc">smartpanel buttons will
								appear as icons</span>
						</div>
						<div class="mt-4 d-table w-100 px-5">
							<div class="d-table-cell align-middle">
								<h5 class="p-0">Global Modifications</h5>
							</div>
						</div>
						<div class="list" id="mcbg">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-clean-page-bg"></a> <span
								class="onoffswitch-title">Clean Page Background</span> <span
								class="onoffswitch-title-desc">adds more whitespace</span>
						</div>
						<div class="list" id="mhni">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-hide-nav-icons"></a> <span
								class="onoffswitch-title">Hide Navigation Icons</span> <span
								class="onoffswitch-title-desc">invisible navigation icons</span>
						</div>
						<div class="list" id="dan">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-disable-animation"></a> <span
								class="onoffswitch-title">Disable CSS Animation</span> <span
								class="onoffswitch-title-desc">Disables CSS based
								animations</span>
						</div>
						<div class="list" id="mhic">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-hide-info-card"></a> <span
								class="onoffswitch-title">Hide Info Card</span> <span
								class="onoffswitch-title-desc">Hides info card from left
								panel</span>
						</div>
						<div class="list" id="mlph">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-lean-subheader"></a> <span
								class="onoffswitch-title">Lean Subheader</span> <span
								class="onoffswitch-title-desc">distinguished page header</span>
						</div>
						<div class="list" id="mnl">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-nav-link"></a> <span
								class="onoffswitch-title">Hierarchical Navigation</span> <span
								class="onoffswitch-title-desc">Clear breakdown of nav
								links</span>
						</div>
						<div class="list" id="mdn">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-nav-dark"></a> <span
								class="onoffswitch-title">Dark Navigation</span> <span
								class="onoffswitch-title-desc">Navigation background is
								darkend</span>
						</div>
						<hr class="mb-0 mt-4">
						<div class="mt-4 d-table w-100 pl-5 pr-3">
							<div class="d-table-cell align-middle">
								<h5 class="p-0">Global Font Size</h5>
							</div>
						</div>
						<div class="list mt-1">
							<div class="btn-group btn-group-sm btn-group-toggle my-2"
								data-toggle="buttons">
								<label class="btn btn-default btn-sm" data-action="toggle-swap"
									data-class="root-text-sm" data-target="html"> <input
									type="radio" name="changeFrontSize"> SM
								</label> <label class="btn btn-default btn-sm" data-action="toggle-swap"
									data-class="root-text" data-target="html"> <input
									type="radio" name="changeFrontSize" checked=""> MD
								</label> <label class="btn btn-default btn-sm" data-action="toggle-swap"
									data-class="root-text-lg" data-target="html"> <input
									type="radio" name="changeFrontSize"> LG
								</label> <label class="btn btn-default btn-sm" data-action="toggle-swap"
									data-class="root-text-xl" data-target="html"> <input
									type="radio" name="changeFrontSize"> XL
								</label>
							</div>
							<span class="onoffswitch-title-desc d-block mb-0">Change <strong>root</strong>
								font size to effect rem values (resets on page refresh)
							</span>
						</div>
						<hr class="mb-0 mt-4">
						<div class="mt-4 d-table w-100 pl-5 pr-3">
							<div class="d-table-cell align-middle">
								<h5 class="p-0 pr-2 d-flex">
									Theme colors <a href="#" class="ml-auto fw-400 fs-xs"
										data-toggle="popover" data-trigger="focus"
										data-placement="top" title="" data-html="true"
										data-content="The settings below uses <code>localStorage</code> to load the external <strong>CSS</strong> file as an overlap to the base css. Due to network latency and <strong>CPU utilization</strong>, you may experience a brief flickering effect on page load which may show the intial applied theme for a split second. Setting the prefered style/theme in the header will prevent this from happening."
										data-original-title="<span class='text-primary'><i class='fal fa-exclamation-triangle mr-1'></i> Heads up!</span>"
										data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i
										class="fal fa-info-circle mr-1"></i> more info</a>
								</h5>
							</div>
						</div>
						<div class="expanded theme-colors pl-5 pr-3">
							<ul class="m-0">
								<li><a href="#" id="myapp-0" data-action="theme-update"
									data-themesave data-theme="" data-toggle="tooltip"
									data-placement="top" title="Wisteria (base css)"
									data-original-title="Wisteria (base css)"></a></li>
								<li><a href="#" id="myapp-1" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-1.css"
									data-toggle="tooltip" data-placement="top" title="Tapestry"
									data-original-title="Tapestry"></a></li>
								<li><a href="#" id="myapp-2" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-2.css"
									data-toggle="tooltip" data-placement="top" title="Atlantis"
									data-original-title="Atlantis"></a></li>
								<li><a href="#" id="myapp-3" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-3.css"
									data-toggle="tooltip" data-placement="top" title="Indigo"
									data-original-title="Indigo"></a></li>
								<li><a href="#" id="myapp-4" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-4.css"
									data-toggle="tooltip" data-placement="top" title="Dodger Blue"
									data-original-title="Dodger Blue"></a></li>
								<li><a href="#" id="myapp-5" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-5.css"
									data-toggle="tooltip" data-placement="top" title="Tradewind"
									data-original-title="Tradewind"></a></li>
								<li><a href="#" id="myapp-6" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-6.css"
									data-toggle="tooltip" data-placement="top" title="Cranberry"
									data-original-title="Cranberry"></a></li>
								<li><a href="#" id="myapp-7" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-7.css"
									data-toggle="tooltip" data-placement="top" title="Oslo Gray"
									data-original-title="Oslo Gray"></a></li>
								<li><a href="#" id="myapp-8" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-8.css"
									data-toggle="tooltip" data-placement="top"
									title="Chetwode Blue" data-original-title="Chetwode Blue"></a>
								</li>
								<li><a href="#" id="myapp-9" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-9.css"
									data-toggle="tooltip" data-placement="top" title="Apricot"
									data-original-title="Apricot"></a></li>
								<li><a href="#" id="myapp-10" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-10.css"
									data-toggle="tooltip" data-placement="top" title="Blue Smoke"
									data-original-title="Blue Smoke"></a></li>
								<li><a href="#" id="myapp-11" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-11.css"
									data-toggle="tooltip" data-placement="top" title="Green Smoke"
									data-original-title="Green Smoke"></a></li>
								<li><a href="#" id="myapp-12" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-12.css"
									data-toggle="tooltip" data-placement="top"
									title="Wild Blue Yonder" data-original-title="Wild Blue Yonder"></a>
								</li>
								<li><a href="#" id="myapp-13" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-13.css"
									data-toggle="tooltip" data-placement="top" title="Emerald"
									data-original-title="Emerald"></a></li>
								<li><a href="#" id="myapp-14" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-14.css"
									data-toggle="tooltip" data-placement="top" title="Supernova"
									data-original-title="Supernova"></a></li>
								<li><a href="#" id="myapp-15" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-15.css"
									data-toggle="tooltip" data-placement="top" title="Hoki"
									data-original-title="Hoki"></a></li>
							</ul>
						</div>
						<hr class="mb-0 mt-4">
						<div class="mt-4 d-table w-100 pl-5 pr-3">
							<div class="d-table-cell align-middle">
								<h5 class="p-0 pr-2 d-flex">
									Theme Modes (beta) <a href="#" class="ml-auto fw-400 fs-xs"
										data-toggle="popover" data-trigger="focus"
										data-placement="top" title="" data-html="true"
										data-content="This is a brand new technique we are introducing which uses CSS variables to infiltrate color options. While this has been working nicely on modern browsers without much issues, some users <strong>may still face issues on Internet Explorer </strong>. Until these issues are resolved or Internet Explorer improves, this feature will remain in Beta"
										data-original-title="<span class='text-primary'><i class='fal fa-question-circle mr-1'></i> Why beta?</span>"
										data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i
										class="fal fa-question-circle mr-1"></i> why beta?</a>
								</h5>
							</div>
						</div>
						<div class="pl-5 pr-3 py-3">
							<div class="ie-only alert alert-warning d-none">
								<h6>Internet Explorer Issue</h6>
								This particular component may not work as expected in Internet
								Explorer. Please use with caution.
							</div>
							<div class="row no-gutters">
								<div class="col-4 pr-2 text-center">
									<div id="skin-default" data-action="toggle-replace"
										data-replaceclass="mod-skin-light mod-skin-dark" data-class=""
										data-toggle="tooltip" data-placement="top" title=""
										class="d-flex bg-white border border-primary rounded overflow-hidden text-success js-waves-on"
										data-original-title="Default Mode" style="height: 80px">
										<div
											class="bg-primary-600 bg-primary-gradient px-2 pt-0 border-right border-primary"></div>
										<div class="d-flex flex-column flex-1">
											<div class="bg-white border-bottom border-primary py-1"></div>
											<div class="bg-faded flex-1 pt-3 pb-3 px-2">
												<div class="py-3"
													style="background: url('img/demo/s-1.png') top left no-repeat; background-size: 100%;"></div>
											</div>
										</div>
									</div>
									Default
								</div>
								<div class="col-4 px-1 text-center">
									<div id="skin-light" data-action="toggle-replace"
										data-replaceclass="mod-skin-dark" data-class="mod-skin-light"
										data-toggle="tooltip" data-placement="top" title=""
										class="d-flex bg-white border border-secondary rounded overflow-hidden text-success js-waves-on"
										data-original-title="Light Mode" style="height: 80px">
										<div class="bg-white px-2 pt-0 border-right border-"></div>
										<div class="d-flex flex-column flex-1">
											<div class="bg-white border-bottom border- py-1"></div>
											<div class="bg-white flex-1 pt-3 pb-3 px-2">
												<div class="py-3"
													style="background: url('img/demo/s-1.png') top left no-repeat; background-size: 100%;"></div>
											</div>
										</div>
									</div>
									Light
								</div>
								<div class="col-4 pl-2 text-center">
									<div id="skin-dark" data-action="toggle-replace"
										data-replaceclass="mod-skin-light" data-class="mod-skin-dark"
										data-toggle="tooltip" data-placement="top" title=""
										class="d-flex bg-white border border-dark rounded overflow-hidden text-success js-waves-on"
										data-original-title="Dark Mode" style="height: 80px">
										<div class="bg-fusion-500 px-2 pt-0 border-right"></div>
										<div class="d-flex flex-column flex-1">
											<div class="bg-fusion-600 border-bottom py-1"></div>
											<div class="bg-fusion-300 flex-1 pt-3 pb-3 px-2">
												<div class="py-3 opacity-30"
													style="background: url('img/demo/s-1.png') top left no-repeat; background-size: 100%;"></div>
											</div>
										</div>
									</div>
									Dark
								</div>
							</div>
						</div>
						<hr class="mb-0 mt-4">
						<div class="pl-5 pr-3 py-3 bg-faded">
							<div class="row no-gutters">
								<div class="col-6 pr-1">
									<a href="#" class="btn btn-outline-danger fw-500 btn-block"
										data-action="app-reset">Reset Settings</a>
								</div>
								<div class="col-6 pl-1">
									<a href="#" class="btn btn-danger fw-500 btn-block"
										data-action="factory-reset">Factory Reset</a>
								</div>
							</div>
						</div>
					</div>
					<span id="saving"></span>
				</div>
			</div>
		</div>
	</div>
	<!-- END Page Settings -->
	<!-- base vendor bundle: 
			 DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations 
						+ pace.js (recommended)
						+ jquery.js (core)
						+ jquery-ui-cust.js (core)
						+ popper.js (core)
						+ bootstrap.js (core)
						+ slimscroll.js (extension)
						+ app.navigation.js (core)
						+ ba-throttle-debounce.js (core)
						+ waves.js (extension)
						+ smartpanels.js (extension)
						+ src/../jquery-snippets.js (core) -->
	<th:block th:include="include :: footer" />
	<script type="text/javascript">
		/* Activate smart panels */
		$('#js-page-content').smartPanel();
	</script>
	<!-- The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below: -->
	<script th:src="@{/js/dependency/moment/moment.js}"></script>
	<script
		th:src="@{/js/miscellaneous/fullcalendar/fullcalendar.bundle.js}"></script>
	<script th:src="@{/js/statistics/sparkline/sparkline.bundle.js}"></script>
	<script th:src="@{/js/statistics/easypiechart/easypiechart.bundle.js}"></script>
	<script th:src="@{/js/statistics/flot/flot.bundle.js}"></script>
	<script th:src="@{/js/miscellaneous/jqvmap/jqvmap.bundle.js}"></script>
	<th:block th:include="include :: echarts-js" />
	<script th:inline="javascript">var loginName = [[${user.loginName}]]</script>
	<script>
		$(document)
				.ready(
						function() {
							//$('#js-page-content').smartPanel(); 

							
							if(loginName!="admin"){
								getRemind();
								self.setInterval("getRemind()", 1000 * 10);
							}
							var prefix = ctx+"dashboard";
							//卡片
							$.ajax({
							    type: "POST",
							    url: prefix+"/empindicator",
							    data: {},
							    dataType:"json",/*返回json类型*/
							    success: function(result){
							    	var curHireEmpNums = result.curHireEmpNums;
							    	var preHireEmpNums = result.preHireEmpNums;
							    	var hireGrowthRateStr = result.hireGrowthRateStr;
							    	var hireClass = "";
							    	if(hireGrowthRateStr.length>1 && hireGrowthRateStr.indexOf("-")>-1){
							    		hireClass = "down";
							    		hireGrowthRateStr = hireGrowthRateStr.substring(1);
							    	}else{
							    		hireClass = "up";
							    	}
							    	var curLeaveEmpNums = result.curLeaveEmpNums;
							    	var preLeaveEmpNums = result.preLeaveEmpNums;
							    	var leaveGrowthRateStr = result.leaveGrowthRateStr;
							    	var leaveClass = "";
							    	if(leaveGrowthRateStr.length>1 && leaveGrowthRateStr.indexOf("-")>-1){
							    		leaveClass = "down";
							    		leaveGrowthRateStr = leaveGrowthRateStr.substring(1);
							    	}else{
							    		leaveClass = "up";
							    	}
							    	var curConfirmEmpNums = result.curConfirmEmpNums;
							    	var preConfirmEmpNums = result.preConfirmEmpNums;
							    	var confirmGrowthRateStr = result.confirmGrowthRateStr;
							    	var confirmClass = "";
							    	if(confirmGrowthRateStr.length>1 && confirmGrowthRateStr.indexOf("-")>-1){
							    		confirmClass = "down";
							    		confirmGrowthRateStr = confirmGrowthRateStr.substring(1);
							    	}else{
							    		confirmClass = "up";
							    	}
							    	$("#hireEmp").prepend("<span>"+curHireEmpNums+"<span class=\"change "+hireClass+" ml-2\"><i class=\"fal fa-long-arrow-"+hireClass+" mr-1\"></i>"+hireGrowthRateStr+"</span></span>");
							    	$("#leaveEmp").prepend("<span>"+curLeaveEmpNums+"<span class=\"change "+leaveClass+" ml-2\"><i class=\"fal fa-long-arrow-"+leaveClass+" mr-1\"></i>"+leaveGrowthRateStr+"</span></span>");
							    	$("#confirmEmp").prepend("<span>"+curConfirmEmpNums+"<span class=\"change "+confirmClass+" ml-2\"><i class=\"fal fa-long-arrow-"+confirmClass+" mr-1\"></i>"+confirmGrowthRateStr+"</span></span>");
							    },error: function (jqXHR, textStatus, errorThrown) {
							        /*弹出jqXHR对象的信息*/
							        alert(jqXHR.responseText);
							        alert(jqXHR.status);
							        alert(jqXHR.readyState);
							        alert(jqXHR.statusText);
							        /*弹出其他两个参数的信息*/
							        alert(textStatus);
							        alert(errorThrown);
							    }
							});
							//本年度各月在职人数
							var myChart1 = echarts.init(document.getElementById('main1'));

							var option1 = {
								// 全局调色盘。
						    	color: ['#886ab5','#2196F3', '#ffc241','#fd3995','#1dc9b7','#505050','#b56a9f','#9fcb3d','#4679cc','#dd5293','#868e96','#7c91df','#e59c6c','#778c85','#a2b077','#7976b3','#55ce5f','#fbe231','##627ca0'],	
								tooltip: {
									trigger: 'axis',
									axisPointer: {
										type: 'shadow'
									}
								},
								legend: {
									data: ['月初在职人数', '月中在职人数','月末在职人数']
								},
								grid: {
									left: '3%',
									right: '4%',
									bottom: '3%',
									containLabel: true
								},
								xAxis: {
									type: 'category',
									data: ['1月', '2月', '3月', '4月', '5月', '6月','7月','8月','9月','10月','11月','12月']
								},
								yAxis: {
									minInterval:1//设置y轴最小刻度是1
								},
								// Declare several bar series, each will be mapped
								// to a column of dataset.source by default.
								series: [{
										name: '月初在职人数',
										type: 'bar',
										label: {
											show: true,
											position: 'inside',
										},
										data: []
									},
									{
										name: '月中在职人数',
										type: 'bar',
										label: {
											show: true,
											position: 'inside',
										},
										data: []
									},
									{
										name: '月末在职人数',
										type: 'bar',
										label: {
											show: true,
											position: 'inside',
										},
										data: []
									}
								]
							};
							var series = option1["series"];
							$.ajax({
							    type: "POST",
							    url: prefix+"/workemp",
							    data:JSON.stringify({}),/*将对象转换为JSON字符串*/
							    contentType:"application/json;charset=utf-8",/*传递json类型*/
							    dataType:"json",/*返回json类型*/
							    success: function(result){
							        //console.log(msg);
							    	series[0].data = result.beginWorkEmpArray;
							    	series[1].data = result.middleWorkEmpArray;
							    	series[2].data = result.endWorkEmpArray;
									// 使用刚指定的配置项和数据显示图表。
									myChart1.setOption(option1);
							    	
							    },error: function (jqXHR, textStatus, errorThrown) {
							        /*弹出jqXHR对象的信息*/
							        alert(jqXHR.responseText);
							        alert(jqXHR.status);
							        alert(jqXHR.readyState);
							        alert(jqXHR.statusText);
							        /*弹出其他两个参数的信息*/
							        alert(textStatus);
							        alert(errorThrown);
							    }
							});

							//各部门成本
    						
							var myChart2 = echarts.init(document.getElementById('main2'));
							var option2 = {
								color: ['#886ab5','#2196F3', '#ffc241','#fd3995','#1dc9b7','#505050','#b56a9f','#9fcb3d','#4679cc','#dd5293','#868e96','#7c91df','#e59c6c','#778c85','#a2b077','#7976b3','#55ce5f','#fbe231','##627ca0'],	
							    tooltip: {
							        trigger: 'axis',
							        axisPointer: {
							            type: 'cross',
							            label: {
							                backgroundColor: '#6a7985'
							            }
							        }
							    },
							    legend: {
							        data: []
							    },
							    grid: {
							        left: '3%',
							        right: '4%',
							        bottom: '3%',
							        containLabel: true
							    },
							    xAxis: [
							        {
							            type: 'category',
							            boundaryGap: false,
							            data: []
							        }
							    ],
							    yAxis: [
							        {
							            type: 'value'
							        }
							    ],
							    series: []
							};
							$.ajax({
							    type: "POST",
							    url: prefix+"/departmentcost",
							    data:JSON.stringify({}),/*将对象转换为JSON字符串*/
							    contentType:"application/json;charset=utf-8",/*传递json类型*/
							    dataType:"json",/*返回json类型*/
							    success: function(result){
							    	var legendData = result.legendData;
							    	option2.legend.data = legendData;
							    	option2.xAxis[0].data = result.xAxisData;
							    	
							    	for(var i=0;i<legendData.length;i++){
							    		var obj1={
			 								type: 'line',
			 								stack: '总成本',
			 								areaStyle: {}
										};
							    		var obj2 = {
							    			name:legendData[i],
							    			data:result.goodsList[i]
							    		}
							    		/* object2 合并到 object1 中 */
										$.extend(obj1, obj2);
							    		option2.series[i] = obj1;
							    	}
									myChart2.setOption(option2);
							    },error: function (jqXHR, textStatus, errorThrown) {
							        /*弹出jqXHR对象的信息*/
							        alert(jqXHR.responseText);
							        alert(jqXHR.status);
							        alert(jqXHR.readyState);
							        alert(jqXHR.statusText);
							        /*弹出其他两个参数的信息*/
							        alert(textStatus);
							        alert(errorThrown);
							    }
							});
							
							
							
							//在职人员结构
							var myChart3 = echarts.init(document.getElementById('main3'));
							var option3 = {
									color: ['#886ab5','#2196F3', '#ffc241','#fd3995','#1dc9b7','#505050','#b56a9f','#9fcb3d','#4679cc','#dd5293','#868e96','#7c91df','#e59c6c','#778c85','#a2b077','#7976b3','#55ce5f','#fbe231','##627ca0'],	
								    tooltip: {
								        trigger: 'item',
								        formatter: '{a} <br/>{b} : {c} ({d}%)'
								    },
								    legend: {
								        orient: 'vertical',
								        left: 'left',
								        data: ['中专', '大专', '本科', '硕士', '博士',
								        '小于等于25','大于25且小于等于30','大于30且小于等于45','大于45',
								        '男','女',
								        '中国籍','外国籍']
								    },
								    series: [
								        {
								            name: '学历',
								            type: 'pie',
								            radius: '40%',
								            center: ['25%', '30%'],
								            data: [
								                /* {value: 335, name: '中专'},
								                {value: 310, name: '大专'},
								                {value: 234, name: '本科'},
								                {value: 135, name: '硕士'},
								                {value: 1548, name: '博士'} */
								            ],
								            emphasis: {
								                itemStyle: {
								                    shadowBlur: 10,
								                    shadowOffsetX: 0,
								                    shadowColor: 'rgba(0, 0, 0, 0.5)'
								                }
								            }
								        },
								        {
								            name: '年龄',
								            type: 'pie',
								            radius: '40%',
								            center: ['75%', '30%'],
								            data: [
								                /* {value: 335, name: '小于等于25'},
								                {value: 310, name: '大于25且小于等于30'},
								                {value: 234, name: '大于30且小于等于45'},
								                {value: 135, name: '大于45'} */
								                
								            ],
								            emphasis: {
								                itemStyle: {
								                    shadowBlur: 10,
								                    shadowOffsetX: 0,
								                    shadowColor: 'rgba(0, 0, 0, 0.5)'
								                }
								            }
								        },
								        {
								            name: '男女比例',
								            type: 'pie',
								            radius: '40%',
								            center: ['25%', '75%'],
								            data: [
								                /* {value: 335, name: '男'},
								                {value: 310, name: '女'} */
								            ],
								            emphasis: {
								                itemStyle: {
								                    shadowBlur: 10,
								                    shadowOffsetX: 0,
								                    shadowColor: 'rgba(0, 0, 0, 0.5)'
								                }
								            }
								        },
								        {
								            name: '国籍',
								            type: 'pie',
								            radius: '40%',
								            center: ['75%', '75%'],
								            data: [
								                /* {value: 335, name: '中国籍'},
								                {value: 310, name: '外国籍'} */
								            ],
								            emphasis: {
								                itemStyle: {
								                    shadowBlur: 10,
								                    shadowOffsetX: 0,
								                    shadowColor: 'rgba(0, 0, 0, 0.5)'
								                }
								            }
								        }
								    ]
								};
								var series3 = option3["series"];
								$.ajax({
								    type: "POST",
								    url: prefix+"/workempstruct",
								    data:JSON.stringify({}),/*将对象转换为JSON字符串*/
								    contentType:"application/json;charset=utf-8",/*传递json类型*/
								    dataType:"json",/*返回json类型*/
								    success: function(result){
								        //console.log(msg);
								    	series3[0].data = result.eduEmpNumList;
								    	series3[1].data = result.ageEmpNumList;
								    	series3[2].data = result.sexEmpNumList;
								    	series3[3].data = result.nationEmpNumList;
										// 使用刚指定的配置项和数据显示图表。
								    	myChart3.setOption(option3);
								    	
								    },error: function (jqXHR, textStatus, errorThrown) {
								        /*弹出jqXHR对象的信息*/
								        alert(jqXHR.responseText);
								        alert(jqXHR.status);
								        alert(jqXHR.readyState);
								        alert(jqXHR.statusText);
								        /*弹出其他两个参数的信息*/
								        alert(textStatus);
								        alert(errorThrown);
								    }
								});
								//考勤效能分析
								var myChart4 = echarts.init(document.getElementById('main4'));
								var option4 = {
										// 全局调色盘。
								    	color: ['#886ab5','#2196F3', '#ffc241','#fd3995','#1dc9b7','#505050','#b56a9f','#9fcb3d','#4679cc','#dd5293','#868e96','#7c91df','#e59c6c','#778c85','#a2b077','#7976b3','#55ce5f','#fbe231','##627ca0'],	
										tooltip: {
											trigger: 'axis',
											axisPointer: {
												type: 'cross',
									            label: {
									                backgroundColor: '#6a7985'
									            }
											}
										},
										legend: {
											data: ['工时', '请假工时','加班工时']
										},
										grid: {
											left: '3%',
											right: '4%',
											bottom: '3%',
											containLabel: true
										},
										xAxis: {
											type: 'category',
											boundaryGap: false,
											data: ['1月', '2月', '3月', '4月', '5月', '6月','7月','8月','9月','10月','11月','12月']
										},
										yAxis: {
											//minInterval:1//设置y轴最小刻度是1
										},
										// Declare several bar series, each will be mapped
										// to a column of dataset.source by default.
										series: [{
												name: '工时',
												type: 'line',
												stack: '工时',
												label: {
													show: true,
													position: 'top',
												},
												areaStyle: {},
												data: []
											},
											{
												name: '请假工时',
												type: 'line',
												stack: '工时',
												label: {
													show: true,
													position: 'top',
												},
												areaStyle: {},
												data: []
											},
											{
												name: '加班工时',
												type: 'line',
												stack: '工时',
												label: {
													show: true,
													position: 'top',
												},
												areaStyle: {},
												data: []
											}
										]
									};
									var series4 = option4["series"];
									$.ajax({
									    type: "POST",
									    url: prefix+"/attendanceanalysis",
									    data:JSON.stringify({}),/*将对象转换为JSON字符串*/
									    contentType:"application/json;charset=utf-8",/*传递json类型*/
									    dataType:"json",/*返回json类型*/
									    success: function(result){
									        //console.log(msg);
									    	series[0].data = result.sumWorkTimeArray;
									    	series[1].data = result.sumLeaveTimeArray;
									    	series[2].data = result.sumOverTimeArray;
											// 使用刚指定的配置项和数据显示图表。
											myChart4.setOption(option4);
									    },error: function (jqXHR, textStatus, errorThrown) {
									        /*弹出jqXHR对象的信息*/
									        alert(jqXHR.responseText);
									        alert(jqXHR.status);
									        alert(jqXHR.readyState);
									        alert(jqXHR.statusText);
									        /*弹出其他两个参数的信息*/
									        alert(textStatus);
									        alert(errorThrown);
									    }
									});
						});
		//获取我的提醒
		function getRemind() {
			$.ajax({
				url : ctx + 'system/remind/getRemindListNoPaging',//地址
				success : function(data, status) {
					//alert(data);
					if(status=='success'){
						
						$("#remindList").empty();
						if(data.length>0){
							$("#remindTotal_1").text(data.length);
							$("#remindTotal_2").text(data.length);
						}else if(data.length==0){
							$("#remindTotal_1").text('');
							$("#remindTotal_2").text('');
						}
						for (var i = 0; i < data.length; i++) {
							var obj = data[i];
							var offset = transDate(obj.remindDate)
							var url = ctx+"system/remind?id="+obj.id;
							$("#remindList").append(
									"<li class=\"unread\"><a href="+url+" class=\"d-flex align-items-center\"> <span class=\"d-flex flex-column flex-1 ml-1\"> <span class=\"name\">"+obj.formName+"</span> <span class=\"msg-a fs-sm\">"+obj.remindContent+"</span> <span class=\"fs-nano text-muted mt-1\">"+offset+"</span></span></a></li>");
						}
					}
				}
			})
		}
		
		// 计算耗时
		function transDate(todoTime) {
			date = new Date(todoTime);
			var tt = date;
			var days = parseInt((new Date().getTime() - date) / 86400000);
			var today = new Date().getDate();
			var year = tt.getFullYear();
			var mouth = tt.getMonth() + 1;
			var day = tt.getDate();
			var time = tt.getHours() < 10 ? "0" + tt.getHours() : tt.getHours();
			var min = tt.getMinutes() < 10 ? "0" + tt.getMinutes() : tt.getMinutes();
			var result, offset;
			offset = Math.abs(today - day);
			if (days < 4 && offset < 4) {
				if (offset === 0) {
					result = "今天" + time + ":" + min;
				} else if (offset === 1) {
					result = "昨天" + time + ":" + min;
				} else if (offset === 2) {
					result = "前天" + time + ":" + min;
				} else if (offset === 3) {
					result = "3天前" + time + ":" + min;
				}
			} else {
				// result = year + "-" + mouth + "-" + day + " " + time + ":" + min;
				result = "3天以前";
			}
			return result;
		}
	</script>
</body>
<!-- END Body -->
</html>
